Reordering Blocks for Mobile

Site URL: https://www.tikipartyrentals.com/pricing-parties-1

Hello! I have been reading around the forum to try to find a quick fix to reordering image blocks on my client's website so they go in the correct order across all formats, but cannot seem to get it right. The issue I'm having is that the images I have ordered correctly for desktop and tablet are becoming out of order on the mobile version. 

For example, my desktop version looks like this:

Image 1 - Image 2

Image 3 - Image 4

...

But on mobile, it looks like:

Image 1 

Image 3

Image 2

Image 4

I know I need custom CSS to solve this but am not sure exactly what that would be. Any help provided would be greatly appreciated! Thanks in advance!

No need to use CSS. You need to adjust layout a bit

First, add Image 1, text 1, image 2, text 2

Next, add Line Block

Next, add Image 3, text 3, image 4, text 4

Next, add Line Block

...

Then remove all Line Blocks.

Done.

On 10/1/2020 at 6:49 PM, tuanphan said:

No need to use CSS. You need to adjust layout a bit

First, add Image 1, text 1, image 2, text 2

Next, add Line Block

Next, add Image 3, text 3, image 4, text 4

Next, add Line Block

...

Then remove all Line Blocks.

Done.

Thanks for this suggestion. Unfortunately, it did not work with my website. Text and images are still appearing out of order

Hey @Madelyn, 

I can confirm you won't indeed need code for what you are trying to achieve. The order of your blocks will depend on the structure of your columns and rows. Here's a Squarespace help article that covers this in more detail:

Page and block layout changes on mobile devices

This guide also has a help video at the top, which explains how can you get the desired order of your blocks when your site is viewed on a mobile device. 

For any further questions/assistance, reach out to Squarespace Customer Support, who is available 24/7 and happy to offer personalized assistance. 

@Madelyn Having the same issue. Did you find a solution?

21 hours ago, iamraag said:

@Madelyn Having the same issue. Did you find a solution?

If you share site url, we can help easier

@tuanphan Site url is https://www.madebydot.tv

We're actually already discussing this on a separate thread - You fixed the issue for the very first two projects under 'Featured work'. But I was looking to do the same for ALL projects after the 'Our clients' section as well.

Let me know.

On 1/5/2021 at 1:58 AM, iamraag said:

@tuanphan Site url is https://www.madebydot.tv

We're actually already discussing this on a separate thread - You fixed the issue for the very first two projects under 'Featured work'. But I was looking to do the same for ALL projects after the 'Our clients' section as well.

Let me know.

Add this under current code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1608630180737_34906+.row, div#block-yui_3_17_2_1_1608452593373_158208+.row, div#block-yui_3_17_2_1_1608452593373_278908+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

@tuanphan Genius! THANK YOU! Saved my life! 

@tuanphan I need to do that for a couple of more items on my website - Could you tell me how you find the block# or the code to target a specific row here? Would love to learn this trick myself so I can keep fixing it whenever I notice an  issue.

10 hours ago, iamraag said:

@tuanphan I need to do that for a couple of more items on my website - Could you tell me how you find the block# or the code to target a specific row here? Would love to learn this trick myself so I can keep fixing it whenever I notice an  issue.

For non-coders, try this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

I know that some have already resolved this but, as I beat my head against the same problem and eventually found a really simple solution, I thought I should still share it here.  The trick is to place your images INSIDE your text boxes which you can do by dragging and dropping into the shaded box on whichever side you want to place them, rather than placing them in the block order as separate items.  Resize as required and then place the whole box with the text and image as desired.