Perfectly Responsive Layout Pages in Squarespace Classic
Layout Pages are flexible, basic content pages you can use when you want to start with a blank space or work with content provided by a starter layout. For most websites, Layout Pages make up the majority of the content.
Just like Squarespace templates are responsive to different screen viewport sizes, so are Layout Pages. The content area is based upon a 12 column grid for layout and will break down into a simple stack on small devices. The break down happens automatically by stacking columns inside rows.
In the following example (between the rules), the titles will stay with their paragraphs just beneath them because each combination is in its own column within a row. Number 1 & 2 are in the first row, 3 & 4 in the second. So, when they all stack up on mobile they are 1, 2, 3, and 4.
1. (Row 1 Column 1)
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellent esque ornare sem lacinia quam venenatis.
2. (Row 1 Column 2)
Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellent esque ornare sem lacinia quam venenatis.
3. (Row 2 Column 1)
Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
4. (Row 2 Column 2)
Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
While laying out your pages, pay close attention to the guidelines – the black lines that appear when clicking and dragging blocks or when hovering an insert point. If the guideline spans the full height of the page, this will create a new column within a row. If the guideline spans the full width of a page, this will create a new row.
