Jump to content

Changing the display order of code blocks on mobile

Recommended Posts

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

Hi there!

So, I have an issue that I'd really love some help solving if possible—but I'm not sure how plausible it is. On the homepage of my site, I have what looks like an index page but what is, in reality, several code blocks stacked and aligned to appear like an index. I've done this so that I can make each thumbnail highly customized—if you hover over each one, you'll see there's an image/text overlay.

The only issue is, on mobile the code blocks display completely in the wrong order. As I have it now on desktop, the thumbnails display in the order I want them to appear, in rows from right to left. But on mobile, they display as one single column—and it displays them going down on the left side first and then the right side. So, while they display as 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 on desktop, they display as 1, 3, 5, 7, 9, 2, 4, 6, 8 10 on mobile.

I cannot for the life of me figure out how to correct this so they display in the same order on mobile. I imagine this would be solved/fixed with some coding finesse, but I'm stumped.

If there's anyone with a bit more HTML/CSS experience than me who might have a solution or be able to help, it'd be GREATLY appreciated.

Thank you so much!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.