Reorder Images on Mobile View

Site URL: https://www.elisabethdeim.com

Hi,

I hope you can help me with this. 

When in mobile view, I would love to see the images on my portfolio website (https://www.elisabethdeim.com) ordered the same way as in desktop view. Currently the images are ordered column by column, but I would like to see them ordered row by row (see image below).

I tried to use this code https://www.rebeccagracedesigns.com/blog/reorder-blocks-on-mobile-squarespace-7-1, but didn't get it working for my problem. 

Is there any way in CSS to replace a single image block with another? Like: image block 2 shows image block 14, image block 3 shows image block 4,...

Or is there an even easier way to get the result I'm looking for?

Help is really appreciated!

Thanks
Elisabeth

Hey 🙂

This video from Chris Schwartz-Edmisten should help you:

Hey Mary,

it's pretty similar to the method I already tried to apply, but they seem to only work for 2-column layouts AND if all the elements have the same hight. I use 3 columns and images with various heights. I think my layout needs a different approach. 

On this page and this page (both Squarespace) the images are ordered the right way, but I can't figure out how they made it work.

So help is still very appreciated. 🙂

I read your problem yesterday afternoon, and couldn't think of a good way.
Now checking again, I can't think of a way either.
The only way that I know is to create 2 layouts, and hide 1 on desktop, hide 1 on mobile. or create 2 pages, then show 1 on desktop, show another on mobile 😆

I just recognized that I missed to put in the URLs of the two squarespace websites I found where the problem doesn't appear:

Page 1: https://www.thebeastisback.com/

Page 2: https://www.mattkstudios.com/

Maybe someone can figure out how they made it work?

4 hours ago, tuanphan said:

I read your problem yesterday afternoon, and couldn't think of a good way.
Now checking again, I can't think of a way either.
The only way that I know is to create 2 layouts, and hide 1 on desktop, hide 1 on mobile. or create 2 pages, then show 1 on desktop, show another on mobile 😆

Yeah, already considered this solution as well, but it would increase the loading time a lot, wouldn't it?

Thanks!

Hi @elisabethdeim,

Sorry I misunderstood! 🙂 

Would using the Masonry Gallery block plugin help?

https://www.sqspthemes.com/plugins/masonry-style-squarespace-gallery-plugin 

If so, it should be a lot easier to target an image in the CSS and to re-arrange the order if needed.

What do you think?

On 6/2/2022 at 6:20 PM, paul2009 said:

A workaround is to add a new Gallery Page and copy your images into it. You can now do this easily using the 'search for images' feature. Gallery Pages (and Gallery Blocks) don't have a wall feature, but Summary Blocks do, so if you a Summary Block to your homepage, link it to the Gallery Page and choose the Wall layout, it should show the images in the style you prefer and it will collapse into the order that you choose 🙂

Hi Paul,

thank you so much for your advice. This workaround works pefectly. Meanwhile I tried something similar: setting up a summary without doing a gallery at first. But within a gallery page it's way more comfortable to change the order of the images than in a summary (need to change publication date). So I will implement your workaround. I'm super happy with that! Thanks! 🙂