Jump to content

Reordering Blocks for Mobile

Go to solution Solved by Susana_SQSP,

Recommended Posts

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!

Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

Link to comment
  • Solution

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. 

Link to comment
  • 2 months later...
21 hours ago, iamraag said:

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

If you share site url, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

Link to comment
  • 10 months later...

@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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
  • 4 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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

 

Screen Shot 2022-05-18 at 9.37.05 PM.png

Link to comment
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/.

 

Screen Shot 2022-05-18 at 9.37.05 PM.png

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

image.thumb.png.ab68ba17448a1cc103c517f55726f9b7.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

 

1849137381_ScreenShot2022-05-18at9_32_45PM.thumb.png.5938d1e66408c45403302b46f33f0c71.png

Screen Shot 2022-05-22 at 6.19.53 PM.png

Hi,

You mean the order on mobile should be like this?

bottom-to-left.thumb.png.7af1ee4f837fcda56f5199c0d13e8acd.png

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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

 

screenshot.png

Edited by yaelkanarek
Link to comment
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?

 

screenshot.png

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;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.