Jump to content

Project Order Messing Up on Mobile

Go to solution Solved by Ziggy,

Recommended Posts

Is there a css code to use so my projects to stay in order when it goes down to mobile? The order goes from left to right.

Example: (12th South Residence, Belle Meade Residence, so on) 

In the mobile version the order is correct until it get to after the Ponte Vedra project. Then it gets out of order. Everything above Ponte Vedra is in the correct order on the mobile version.

Anything you can do to help with this? 

https://www.berschbackdesign.com/projects

Link to comment

The way that this version of Squarespace (7.0 classic editor) works on mobile is that it stacks up everything in each row from the left column to the right column, and then does the next row.

At the top of your page you have the text and image in the left column and then the text and image in the right column, then you have a new row with two images, like this:

image.thumb.png.b4057e0a9617400690515beaf6ea23f1.png

Then you get to the next row, and it has the left column that contains three images + text stacked vertically, and the right column has 3 images + text stacked like this:

image.thumb.png.bd3fe57b671b054e50fe557d2a8bc424.png

So that's why they are correctly in order and then go into the wrong order.

In order to correct this you are going to need to redo the layout and create individual rows for each pair of images. I like doing this by having full width spacer blocks, and dragging one image between them first, then drag the second to be next to it, then drag the two text blocks in and stack them on top of each of the images. Once you have the rows set up, you can remove the spacer blocks that you added.

I hope that makes sense, it's not too difficult to do, but tricky to explain with enough clarity!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

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

 Did I help? Buy me a coffee?

Link to comment
  • Solution
On 8/5/2023 at 11:02 PM, Liz1994 said:

@Ziggy is there a way to fix it so the images are still stacked from left to right? Visually it looks better when its a row of 2. 

Yes, the detailed guidance on rebuilding the layout to have the images in the correct order would leave it looking exactly the same on desktop, it just changed the way that it was built so that on mobile it would be the order you wanted.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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.