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

Change block order in mobile


MaggieBovary

Question

Site URL: https://villa-rondinelli.squarespace.com/

Hi all,

in a couple of pages of my website the mobile version swapped some of the blocks order:

- here: https://villa-rondinelli.squarespace.com/storia

- and here: https://villa-rondinelli.squarespace.com/ambienti

password: maggie-villa

There should be the text first and then the image throughout the page.

 

I tried so many different solutions and nothing seems to work 😕 I thought I could solve it with 'flex-direction: column-reverse' but I couldn't manage to select a specific block as some of them don't have IDs, so it selects all the items with the same class name.

 

Any suggestion on how to solve this and, in general, how to select a tag that does't have a specific ID without selecting all the tags with the same name?

Thanks!

 

Link to comment

Recommended Posts

  • 0
32 minutes ago, paulineg said:

Omg @tuanphan You are a STAR!! thank you so much!!! can't believe square space support was not able to tell me this! Thank you so much!!🙏

I see some text disappear on footer tablet.

image.thumb.png.40b63d792dda86d47a6edfc8185dee29.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 2/12/2021 at 1:43 AM, SouthernSunEvents said:

Hi @tuanphan,

I'm on the struggle with this too. My blocks on desktop are side by side image then text and in mobile they are resorted all 3 images on top and all 3 text blocks on bottom. I need mobile view to be image - text - image - text

Website is: www.southersunevents.com

Password: sse2020

Screen Shot 2021-02-11 at 8.54.40 PM.png

Screen Shot 2021-02-11 at 8.55.44 PM.png

Add Image - Text

Add a Line Block

Add Image - Text

Add a Line Block

Add Image - Text

Remove all Line Blocks

Then check your site on mobile

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

@whoshenry

Add the following to Design > Custom CSS.

/* make image block inline text left/image right, image top/text bottom on mobile */

@media screen and ( max-width : 767px ) {

  [data-section-id="6051f281305a1f21c2b777ba"] .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:nth-child( 4n+1 ) {
  
    background-color : blue !important;
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 3/26/2021 at 1:48 AM, creedon said:

@whoshenry

Add the following to Design > Custom CSS.


/* make image block inline text left/image right, image top/text bottom on mobile */

@media screen and ( max-width : 767px ) {

  [data-section-id="6051f281305a1f21c2b777ba"] .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:nth-child( 4n+1 ) {
  
    background-color : blue !important;
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

This works perfectly, thank you very much for your help. Greatly appreciated.

Thanks.

Link to comment
  • 0

Hi @tuanphan,

I'm having an issue identifying the target for this code in reference to an index page. I need to switch the order of blocks on mobile for one section of the index page on this site: https://erin-medine.com/home.

I need it to go 

1.picture of leaf

2.my wishlist

3.picture of blonde girl

4.Faq and etiquette

 

thanks for any help!

Link to comment
  • 0
On 5/12/2021 at 2:16 AM, erin2 said:

Hi @tuanphan,

I'm having an issue identifying the target for this code in reference to an index page. I need to switch the order of blocks on mobile for one section of the index page on this site: https://erin-medine.com/home.

I need it to go 

1.picture of leaf

2.my wishlist

3.picture of blonde girl

4.Faq and etiquette

 

thanks for any help!

Can you check site url?

image.thumb.png.224bad66a3335c8336008c15cc06af01.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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