Jump to content

7.1 Reordering mobile layout

Go to solution Solved by Ziggy,

Recommended Posts

  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

You don't need custom css for this. This is tricky to explain in text, but the reason that the order is the way it is on mobile is that when you built the section, you made just two columns and 1 row, all of the content on the left, so on mobile it displays the left column followed by the right column.

What you need to do is create one row for the first two image/text, then start a new row for the next two. Start with the first image and drag it to a full-width insertion point so it takes up the full width, then drag the second image so it goes next to it, then drag the two text blocks to go below the correct images. Now do this again with the third and fourth images. It can be helpful when doing this to add in 3 or 4 full-width spacer blocks at the bottom of the section and create each row between them, then delete the spacers when you're done.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.