How can I adjust the site width in Webflow to prevent horizontal scrolling?

Published on
September 22, 2023

To adjust the site width in Webflow and prevent horizontal scrolling, you can follow these steps:

  1. Access the Designer: Log in to your Webflow account and access the Designer for your project.

  2. Select the Body element: In the Designer, locate the Body element in the Navigator panel. This element represents the entire page of your website.

  3. Adjust the site width: With the Body element selected, go to the Styles panel on the right-hand side. Look for the "Width" property and enter the desired width for your site. You can use pixels (px) or percentage (%). For example, setting the width to "100%" will make your site fill the entire width of the viewport.

  4. Set overflow to hidden: To ensure that horizontal scrolling is prevented, set the overflow property of the Body element to "hidden". This will hide any content that extends beyond the specified width, effectively preventing horizontal scrolling.

  5. Review breakpoints: If you have responsive design enabled for your site, you may need to adjust the site width separately for each breakpoint. To do this, select a breakpoint from the top toolbar and repeat steps 3 and 4 for each breakpoint as needed.

  6. Preview and publish: After making the necessary adjustments, preview your site in the Designer to ensure there is no longer horizontal scrolling. If everything looks good, save and publish your site to apply the changes.

By adjusting the site width and setting the overflow property to hidden, you can effectively prevent horizontal scrolling in Webflow.

Additional Questions:

  1. Can I adjust the site width differently for each page in Webflow?
  2. How can I create a fixed-width layout in Webflow?
  3. What is the recommended maximum width for a responsive website in Webflow?