Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Reordering Blocks for Mobile


Madelyn
Go to solution Solved by SusanaR,

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 post
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

  • 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 post

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 post
  • 2 months later...

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

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post

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

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...