EverWeb Logo


Responsive Page Layout

Video Transcript:

The Page Layout section of the Page Settings tab is where you define the specifications of your page. You can choose either a Left Aligned, Centered or Responsive page layout.

We usually recommend using either a centered or responsive page layout for your website.

We will look at the responsive page layout later on…

When using a Centered or Left aligned page layout, as I move an object around the page, you will see the page boundaries as set in the Page Layout fields.

These are the values that we will be changing.

Specifying a Top Margin value greater than zero will create a space between the top of your web page and the highest point of the browser window.

Like the top margin of a page of a book, this area is always empty and you cannot place anything in this area.

Usually you will not need to use a Top Margin setting on your page.

The Content Width field determines how wide you want your page to be. Centered and Left Aligned page layouts are known as Fixed Width layouts.

The Content Height field determines the minimum height of the body of the page. This value rarely needs to be changed as the height automatically adjusts based on where you place objects on your page.

For example, dragging an object down the page increases its length automatically. However, the Content Height field does not increase as it shows only the minimum content height that has been set.

The Header Height determines the height of the header. Like Content Height, this automatically adjusts based on the objects you have in the header. As with Content Height, the value in the Header Height field is the minimum header height.

Finally, the Footer Height determines the height of the footer and works in the same way as the Header and Content Height fields.

If you want the header or footer heights to be less than what you see on the page, decrease the values in the Header Height and Footer Height fields.

If you are using a Responsive Page layout, the Content Width field will not be available as the width of the page is not fixed at a particular pixel width value, but will scale automatically to suit the device your page is being viewed upon.

Therefore the page will always scale to the full width of the available page width .

The Header Height value is also greyed out as Responsive page layouts do not use headers.

When adding objects to your Responsive page, they will either automatically use the full width of the page or should be placed within the Responsive Row widget.

Full width objects in responsive pages always automatically stack beneath each other from the top of the page downwards

The Top Margin, Content Height and Footer Height fields of the Responsive page layout work in the same way as they do for the Centered and Left Aligned page layouts as described earlier in this video.