Jump to content

Mobile Blocks Not Reordering

Recommended Posts

Site URL: http://www.taichinash.com

I have added this to my CSS Code to try to fix my Mobile site. (It's a mess).

@media only screen and (max-width: 640px) {
div#page-section-62efe18aa0206c077b5ab055 .row {
    display: flex;
    flex-direction: column-reverse;
}}

I have lots to re-order on the Mobile site. The page looks fine on full browser. Before I fix the whole mobile site - I am trying to get following.

Image 1. Text 1. then

Image 2. Text 2.

It's showing up as

Text 1. Image 1.

Image 2. Text 2.

 

Not even sure how I will tackle the three columns yet. Any help would be great. Websites and CSS are not my strength 😉 Tai Chi is.

Thanks

Link to comment
17 hours ago, AnnaT said:

Site URL: http://www.taichinash.com

I have added this to my CSS Code to try to fix my Mobile site. (It's a mess).

@media only screen and (max-width: 640px) {
div#page-section-62efe18aa0206c077b5ab055 .row {
    display: flex;
    flex-direction: column-reverse;
}}

I have lots to re-order on the Mobile site. The page looks fine on full browser. Before I fix the whole mobile site - I am trying to get following.

Image 1. Text 1. then

Image 2. Text 2.

It's showing up as

Text 1. Image 1.

Image 2. Text 2.

 

Not even sure how I will tackle the three columns yet. Any help would be great. Websites and CSS are not my strength 😉 Tai Chi is.

Thanks

I try the following code and it seems fine

@media only screen and (max-width: 767px) {
  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:first-child {
    grid-area: 7/2/13/10; 
  }

  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:last-child {
    grid-area: 1/2/6/10;
  }
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.10e415a9110a020674da40ff8a2c0142.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 8/10/2022 at 2:50 AM, AnnaT said:

Thank you the CSS code you mentioned. This did not make the changes for me. It looks like it worked for you. Any other ideas?

Try changing his code to this

@media only screen and (max-width: 767px) {
  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:first-child {
    grid-area: ~"7/2/13/10" !important; 
  }

  section[data-section-id="62efe18aa0206c077b5ab055"] .fe-block:last-child {
    grid-area: ~"1/2/6/10" !important;
  }
}

 

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.