Set your Page Width

PageCloud pages have a default page width of 1080px to provide a good viewing experience across the largest range of devices.

The purple page width guides display help show this width on the page allowing you to arrange content within the page width. 

Within your page, Sections are used to organize the content into horizontal containers. Sections on your page can be set to either Page width ( content kept within the purple page width guides) or Full width (content is stretched to the full browser width).

Change a page's width

  1. While editing a page, click on the Sidebar on the left of your screen.
  2. Click "Settings" at the bottom of this menu.
  3. Within the "Page Settings", click  "Advanced". 
  4. You'll see three options for Page Sizes, or you can enter a value under "Custom Width".

Avoid setting the page width higher than 1280px. This makes it harder to see on smaller screens and will require scroll bars for visitors that want to view the entire page.

Adjust Section width 

Sections can have different width settings to change how content appears when adjusting the size of your browser window.

  1. Select a Section. 
  2. Click "Column" in the top left corner of the Section's column to open up the Editing Menu.
  3. Select the "Layout" tab in the Editing Menu.
  4. Under "Width" you have multiple choice:
    • Page Width -  Constrains Columns and content to the width set in your Page Settings. The default page width is 1080px.
    • Full Width - Columns and content adjusts to fit the full width of the web browser. This requires the columns within the Section to be set to Auto Column Layout.

  5. Select the Width choice that suites your design.
  6. Click "Save"  to save changes to your page.

Access Mobile Layout Builder - Optimize for Mobile device width

Mobile mode provides an optimized experience for the mobile device size.

  1. Activate the Mobile Layout Builder. 
  2. Click the top center of the page where it says "Mobile Phone Layout"
  3. You are now in the Mobile Layout Builder. 
  4. Click "Save" to save changes made to your mobile mode.

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!