Jump to content

Mobile - Layout Change

Recommended Posts

Hello there!

The code to change the positioning of the text and image shown only on the page in the example above would be something like this:

#collection-6177601a56097560be5eed2e {
@media only screen and (max-width: 769px){
.sqs-row:nth-child(3) {
display: flex;
flex-direction: column;
.sqs-row:nth-child(3) .sqs-col-4 {
width: 100% !important;

Most of the default layouts are structured by pages (collection), sections, rows, and then columns(sqs-col-...).  In the code above, we target the page ID, then the 3rd row on the page using - :nth-child(3) - , and apply the flex-column layout to the 3rd row when the dimensions are less than 769px (tablet-size).

Because the row and the column we're targeting won't be the correct width until later (640px) on mobile devices, we apply the width increase to the column nested inside the ":nth-child(3)" row early, demonstrated on the 8-9 lines of code.


Hope this help,


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.