How can I make my Canvas page fill the page width?

Default behavior: 1100px maximum width

By default, DesignPLUS content has a maximum width of 1100 pixels, meaning that it will not grow responsively when your browser window is wider than that size.

This is a usability consideration: usability is not met when content fills the full width of a large screen. For example, paragraphs become harder to read when they stretch across the entire screen. The optimal line length for reaching comprehension is 50-75 characters.

In general, Cidi Labs does not recommend making the page width greater than 1100 pixels to avoid usability issues. However, if you are using designs built to work on larger widths — or if you are using Canvas's New User Tutorial, which makes Canvas content fill the browser window width — you have the ability to override the default maximum width.

How to fill the page width

To allow the page content to grow beyond 1100px, add the class dp-full-width-content to any element on the page or add data-dp-fullwidth="true" to the dp-wrapper div.

To add this class using the Attributes tool:

1. Edit the page and open the sidebar.
2. Go to the Advanced tools and open the Attributes tool.
   • If needed, first go to the User Settings and enable this advanced tool.
3. In the Attributes tool, select the div labeled "Page."
   • Typically, this is the div to the very far left of the target element list. You can hover over each element to view its label.
4. In the class field, add the class dp-full-width-content.
5. Save the page.
6. When the page loads, it will take up the full width of the screen.

This is an example of a Hidden Gem in the DesignPLUS sidebar. For more Hidden Gems, see the DesignPLUS User Guide: Hidden Gems.