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

@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.

@tuanphan Could I please have a hand with this one?

I have tried my best to locate the correct row (with the plug-in assist) to switch the order with no luck. I think that my extra spacers and line are throwing me. Could I please have help reversing the second row (ie 1 Bedroom + Balcony) on mobile view for this page?

https://lanternfish-seadragon-7cx5.squarespace.com/1-bedroom-apartments

I'll then deconstruct to fix my other pages.

Thanks in advance!
Joe

On 11/26/2021 at 11:11 AM, hotel_sites said:

@tuanphan Could I please have a hand with this one?

I have tried my best to locate the correct row (with the plug-in assist) to switch the order with no luck. I think that my extra spacers and line are throwing me. Could I please have help reversing the second row (ie 1 Bedroom + Balcony) on mobile view for this page?

https://lanternfish-seadragon-7cx5.squarespace.com/1-bedroom-apartments

I'll then deconstruct to fix my other pages.

Thanks in advance!
Joe

You mean Text - Slide - Text - Slide - Text - Slide?

hey guys, so for the landing page, i was thinking to rearrange the order of text and image for 2nd section. Currently in mobile it shows 

text > image 
Image > Text (want this to be text > image)
Text > image 

Website:https://www.reklaimyours.com/browser-test
Thanks! 

On 2/3/2022 at 11:53 PM, kam_2kbk said:

hey guys, so for the landing page, i was thinking to rearrange the order of text and image for 2nd section. Currently in mobile it shows 

text > image 
Image > Text (want this to be text > image)
Text > image 

Website:https://www.reklaimyours.com/browser-test
Thanks! 

Hi. The url doesn't exist. Can you check it again?

Hi @tuanphan,
Do you mind helping me reorder the blocks for the services page for mobile?

I'd like each section to go:
image
title + description
accordion
button

https://haddock-cow-8ae7.squarespace.com/
pass: coach

thank you!

On 4/26/2022 at 10:20 PM, jesswp said:

Hi @tuanphan,
Do you mind helping me reorder the blocks for the services page for mobile?

I'd like each section to go:
image
title + description
accordion
button

https://haddock-cow-8ae7.squarespace.com/
pass: coach

thank you!

Hi,

Which page are you referring to? I don't see accordion on homepage

9 hours ago, tuanphan said:

Hi,

Which page are you referring to? I don't see accordion on homepage

We ended up going with a different design! Thank you anyway 🙂

Hi, I'm struggling with this as well. Tried several versions of block reordering. Nothing is working. The blocks are pairs of text and blog summaries.

This is what entered in the advanced section of the page:

@media screen and (max-width:767px) {
div#block-be9088bc60280d53b148+.row, 
div#block-4115cac075b4b84e1df3+.row, 
div#block-8617c3e4f399833a6e63+.row, 
div#block-0ad3c064b8754171c44e+.row, 
div#block-fe158f2cd07858e46063+.row, 
div#block-1bf5f6b11c16c65ed970+.row 
{
    display: flex;
    flex-direction: column-reverse;
}
}

It's a website in Hebrew and there are a lot of ltr issues. The template is Brine.

I'm including an image of the desire order. The website is https://www.toratah.org/.

On 5/19/2022 at 8:40 AM, yaelkanarek said:

Hi, I'm struggling with this as well. Tried several versions of block reordering. Nothing is working. The blocks are pairs of text and blog summaries.

This is what entered in the advanced section of the page:

@media screen and (max-width:767px) {
div#block-be9088bc60280d53b148+.row, 
div#block-4115cac075b4b84e1df3+.row, 
div#block-8617c3e4f399833a6e63+.row, 
div#block-0ad3c064b8754171c44e+.row, 
div#block-fe158f2cd07858e46063+.row, 
div#block-1bf5f6b11c16c65ed970+.row 
{
    display: flex;
    flex-direction: column-reverse;
}
}

It's a website in Hebrew and there are a lot of ltr issues. The template is Brine.

I'm including an image of the desire order. The website is https://www.toratah.org/.

 

The language text looks same...Can you write note on screenshot? I can check easier

Hi tuanphan,
The horizontal is on the website. the blocks are read rtl. it means that they are in the reversed order from squarespace blocks pov. the vertical is the desired order. I color coded the blocks. I hope this helps.

thanks!

10 hours ago, yaelkanarek said:

Hi tuanphan,
The horizontal is on the website. the blocks are read rtl. it means that they are in the reversed order from squarespace blocks pov. the vertical is the desired order. I color coded the blocks. I hope this helps.

thanks!

 

Hi,

You mean the order on mobile should be like this?

Add to Design > Custom CSS

/* Mobile text columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652984111457_5852+.row {
    display: flex;
    flex-direction: column-reverse;
}}

Wonderful! This is perfect. I'm curious why you're calling the block above to reorder all the other blocks.

On the bilingual site I have a slightly different problem. The english block (genesis) should appear at the top as as it is right now, but the hebrew blocks should be reversed in order as in the hebrew website. What do you propose?

11 hours ago, yaelkanarek said:

Wonderful! This is perfect. I'm curious why you're calling the block above to reorder all the other blocks.

On the bilingual site I have a slightly different problem. The english block (genesis) should appear at the top as as it is right now, but the hebrew blocks should be reversed in order as in the hebrew website. What do you propose?

 

There are many ways to target an element. I'm just using the way that comes to mind first. 😆

https://www.w3schools.com/css/css_selectors.asp

Add to Design > Custom CSS

/* Book of Genesis */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1641932655327_26611+.row {
& {
    display: flex;
    flex-direction: column;
}
.span-3:nth-child(1) {
    order: 1;
}
.span-2:nth-child(4) {
    order: 2;
}
.span-2:nth-child(3) {
    order: 3;
}
.span-3:nth-child(2) {
    order: 4;
}}}