How did a theme in Webflow achieve a 1200px container width in both the browser and the designer? Is this accomplished through custom code?

Published on
September 22, 2023

To achieve a 1200px container width in both the browser and the designer in Webflow, you can follow these steps:

  1. Open the Webflow project in the Designer.
  2. Select the desired theme you want to modify.
  3. In the top right corner of the Designer, click on the Settings icon (gear icon).
  4. In the left sidebar that appears, scroll down to the section titled "Layout".
  5. Within the "Layout" section, you will find the "Container Width" option. By default, this will be set to "Auto". Click on the dropdown and select "Fixed".
  6. After selecting "Fixed", a new field will appear next to it, allowing you to set the desired container width. Enter 1200px as the value.
  7. Once you input 1200px, the changes will automatically reflect in the Designer, allowing you to preview the width of the container.
  8. Save and publish your project to see the 1200px container width in the browser.

It's important to note that achieving a 1200px container width in Webflow does not require custom code. The Webflow design interface provides you with the necessary settings to make this adjustment easily. This means you can achieve the desired container width without engaging in any complex coding processes.

To summarize, to achieve a 1200px container width in both the browser and the designer in Webflow:

  1. Open the Webflow project.
  2. Go to the theme settings in the Designer.
  3. Select the desired theme.
  4. Set the "Container Width" option to "Fixed".
  5. Input 1200px as the container width.
  6. Save and publish your project.

Additional Questions:

  1. How do I change the container width in Webflow?
  2. What are the default container width options in Webflow?
  3. Can I have different container widths for different sections in Webflow?