Row layouts: full width and fixed width
When you create a row in Page Builder, you can specify whether the row is full width or fixed width. If you set the row to full width, you also have a choice of whether the row content is full width or fixed width. Here are screenshots of some rows to illustrate the three choices of row width and content width. To keep it simple, the margins and padding on…
Published 11 January 2022
When you create a row in Page Builder, you can specify whether the row is full width or fixed width. If you set the row to full width, you also have a choice of whether the row content is full width or fixed width.
Here are screenshots of some rows to illustrate the three choices of row width and content width. To keep it simple, the margins and padding on rows, columns, and modules are all set to 0px.
1. Full-width row, full-width content
When row width is set to full width, the row background stretches to either the full width of the browser or the full width of the page’s boxed content area, a choice set by the theme.
When the content is also set to full width, it likewise stretches to the full width of the screen or boxed area. With this setting, you’d use row, column, or module margins and padding to move the column or content away from the left and right edges of the page.
Tip: Setting a row margin will move the row background away from the edge of the page, something you usually don’t want. Setting a row’s padding keeps the row background at the page edges but pushes the column away from it. See the Related Articles for more information about margins vs. padding.
2. Full-width row, fixed-width content
The row is set to full width, and content is set to fixed-width. The default fixed-width setting is 1100px, but you can change it. In this example, content width is set to 800px. This means that with no margins or padding the column and the module are 800px wide and centered horizontally on the page. In this example, the heading and text are left-justified within that content width.
Note: When you set a fixed width, you are actually setting the max width. A fixed-width setting of 800px means the width will never be more than 800px wide, but it will shrink as screen size decreases, to ensure the layout is responsive.
In the third row, row width is set to Fixed. This means the row background will stretch to either the default fixed width (1100px) or a custom width that you specify. The fixed-width setting is the max width, like the previous example.
When the row is set to fixed width, the content is automatically set to the same width minus any margin and padding settings. You can compare Rows 2 and 3 in the screenshot to see the difference between setting the content width to 800px and setting the row width to 800px. The content in Rows 2 and 3 is vertically aligned, but the width of the row background is different.
Book a free demo today and let us discover how we can serve your company.