Jump to content

Project Order on Mobile

Go to solution Solved by Ziggy,

Recommended Posts

Hi, been reading through articles but nothing I’ve tried works so far and I don’t have the new 7.1 version. The project order on the desktop site looks perfect - left to right: Edgewater - 50 W - Park Ave - Forest Hills. When I open this page on mobile it displays projects as Edgewater - Forest Hills - 50 W. How do I make mobile page display projects in the same order as on desktop? Losing my mind here, any help will be very very appreciated! 
The way I built it was by adding one image then another on the right of it, then another on the right of the last, then adding one under the first - to start a new row. 
I tried creating this in just new gallery page, inserting line and spacers between first and  last project images that are displayed on top of each other on desktop, adapting and inserting codes I found on other threads,.. ugh

https://www.alinahetz.com/projects

 

Edited by AlinaH
Link to comment

@AlinaH This issue has been successfully addressed in the latest version of Squarespace 7.1.

To resolve this, I'd suggest adding another 'Forest Hills Residence' just below the 'Park Avenue Residence'. Then, with custom code we can ensure that 'Forest Hills Residence' is displayed below 'Park Avenue Residence' only on mobile devices.

Once you've added the 'Forest Hills Residence', you can let me know, and I'll provide you with the necessary code to achieve this.

 Thanks! 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • Solution

The easiest way to fix this is to take the Forest Hills project out of the first column and place it on a new row with a spacer block to it's right to get the grid look you want, this is the current order:

image.thumb.png.350608331def90e67f16bb1c3cfc3485.png

Add a new spacer block to the bottom of this section, full width is important, then drag the Forest Hills image down to inset next to the spacer block on the left, then adjust the width of the image to match above. 

That will put forest hill last on mobile.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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
4 hours ago, AlinaH said:

@Ziggy That fixed it! Really appreciate your help 🙂 

No problem, happy to help!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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.