Centered layout for pages

Centered layout for pages

Follow these steps to modify the Cascade page template to display content in a single column in the center of the page. Make sure to work in a duplicate of the theme so you can easily undo your changes if something goes wrong. You can make these changes to the main page template or create an alternate page template with this layout.

In the file Snippets / page__template.liquid, find the two .grid__item elements and remove the classes .lg--up--two-fifths and .lg--up--three-fifths, respectively. Remove the .lg-up--mt0 class on the second .grid__item.

Change the .lg--up--seven-eighths class on the top-most div element to .lg--up--one-half to prevent the content from becoming too wide. In case you prefer a wider column here, we would recommend to also increase the font size to prevent the lines of text from being too long to comfortably read.

Your template’s final code should be something like this.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.