Jump to content

Mobile View Order of Image and Text

Recommended Posts

I have this same question for my site that I also have

text-image

image-text

and it displays on mobile vertically using left to right, resulting in text image image text when I want text image text image. 

I had this on another one of my pages I built out a year or so ago and was able to address this using flex boxes; however, altering the same code for my new page is not having any effect to fix the issue. In my case, I think I may be using the wrong selector (even though I am using the same selector as the page that is working, but respective of the page I'm trying to fix)

For reference if you want to try utilizing/altering the code I had past success with (but isn't working on my new page):

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

div#page-5f5a5511bba4a15636d690f3 .span-12>.row:nth-child(6) {

    display: flex;

    flex-direction: column-reverse;

}

}

 

Where the number inside the child parentheses reflects which row on the grid you want to reverse. The div#page would also need to be adjusted to reflect your page. (Found by viewing page source and searching for id="page-)

The issue I think I am currently having is with the div#page - the above code works on the page from about a year ago, but altering this to reflect the new page I am building out has no effect, so I'm not sure what is going on there.

Edited by Maielstrom
Link to comment
21 minutes ago, Maielstrom said:

I have this same question for my site that I also have

text-image

image-text

and it displays on mobile vertically using left to right, resulting in text image image text when I want text image text image. 

I had this on another one of my pages I built out a year or so ago and was able to address this using flex boxes; however, altering the same code for my new page is not having any effect to fix the issue. In my case, I think I may be using the wrong selector (even though I am using the same selector as the page that is working, but respective of the page I'm trying to fix)

For reference if you want to try utilizing/altering the code I had past success with (but isn't working on my new page):

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

div#page-5f5a5511bba4a15636d690f3 .span-12>.row:nth-child(6) {

    display: flex;

    flex-direction: column-reverse;

}

}

 

Where the number inside the child parentheses reflects which row on the grid you want to reverse. The div#page would also need to be adjusted to reflect your page. (Found by viewing page source and searching for id="page-)

The issue I think I am currently having is with the div#page - the above code works on the page from about a year ago, but altering this to reflect the new page I am building out has no effect, so I'm not sure what is going on there.

Hi! Thanks for the reply. I'm in the same situation, I had this problem on my home page a few months ago with the image cards and I was able to fix it, but I think this is a different case. Over here, I've used individual image blocks and text blocks, and I can't select them as a row.

Link to comment
5 hours ago, anon123 said:

Hi! Thanks for the reply. I'm in the same situation, I had this problem on my home page a few months ago with the image cards and I was able to fix it, but I think this is a different case. Over here, I've used individual image blocks and text blocks, and I can't select them as a row.

I believe that might be the same thing I am experiencing as the page I detailed where this works is an instance of image galleries and text whereas the new page I noted where the code is not working is individual image blocks with text blocks as you have too. 

I haven't received a reply on the thread I made, but if a solution shows up there, I'll come back here to update as well!

Link to comment

I try the following code and it seems works

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1660869163430_3255741 + .row > .span-11 > .row {
    display: flex; 
    flex-direction: column;
  }

  #block-yui_3_17_2_1_1660869163430_3255741 + .row > .span-11 > .row  > .span-7 {
    order: 2;
  }

  #block-yui_3_17_2_1_1660869163430_3387184 + .row > .span-11 > .row {
    display: flex; 
    flex-direction: column;
  }

  #block-yui_3_17_2_1_1660869163430_3387184 + .row > .span-11 > .row  > .span-7 {
    order: 2;
  }
}

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.754cf7b90e3cce23d722ff003404d107.png

 

image.png.4377ad5881e58bf2bcaf059165165bc1.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

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.