Swap Text and Image Block Order in Mobile View

Site URL: https://www.leoupikou.com/about

Hello everybody,

I would like to ask for your help to improve the design of my site on mobile view.

I saw a lot of posts with similar questions but I haven't been able to find the right solution for me.

I would like to change the way the elements are displayed on my about page.

--

On desktop it's the following:

1/ Text - Image

2/ Image - Text

3/ Text - Image

--

But on mobile it ends up being:

1/ Text

2/ Image

3/ Image

4/ Text

5/ Text

6/ Image

--

I would like to have this instead:

1/ Text

2/ Image

3/Text

4/ Image

5/ Text

6/ Image

--

I've tried several CSS codes but nothing gave me a satisfying result.

The page is built with 3 blocks, each containing a text and an image. So probably only a code is needed to swap the content in the middle block on mobile.

Any help would be more than appreciated.

The password of the site is the following: diwvik-wugwi8-kavtIc

Thank you in advance!

Edited December 2, 2021 by Gattinomio

Add to Design > Custom CSS

/* Mobile-About page order */
@media screen and (max-width:767px) {
div#page-section-618646688a7f99372a838ff6>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

Oh thank you so much for your answer!!! I hadn't seen the notification.

It's perfect!  Exactly what I was looking for. Thank you very much for your help

Thank you for this! I used the same code changing the id and it worked perfectly on the homepage. However, when I went to do the same thing on this page, it didn't. Any idea why?
 

https://dalmatian-grouper-jpfs.squarespace.com/about-tttm
pw: tttm2021

12 hours ago, amacarv said:

Thank you for this! I used the same code changing the id and it worked perfectly on the homepage. However, when I went to do the same thing on this page, it didn't. Any idea why?
 

https://dalmatian-grouper-jpfs.squarespace.com/about-tttm
pw: tttm2021

With about page, use this code

/* Mobile-About page-Order */
@media screen and (max-width:767px) {
div#page-section-61f0623bb401ab072610d193 .span-11 .row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-61f062d702a8026e5cb41c25 .span-11>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

Thank you @tuanphan!

On 12/4/2021 at 3:24 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-About page order */
@media screen and (max-width:767px) {
div#page-section-618646688a7f99372a838ff6>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

How did you find the "page section"? 
I'm having the same problem where the titles are bunched together on mobile. On desktop and tablet they're fine, but on mobile it looks like image #3 where it says "Episode 1. Episode 2. Upcoming)

Thanks so much

 

On 10/17/2022 at 11:15 PM, JTeich said:

How did you find the "page section"? 
I'm having the same problem where the titles are bunched together on mobile. On desktop and tablet they're fine, but on mobile it looks like image #3 where it says "Episode 1. Episode 2. Upcoming)

Thanks so much

 

You can use data-section-id, instead of #page

Use this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

2 hours ago, tuanphan said:

You can use data-section-id, instead of #page

Use this tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hello,

Thanks so much for your help.  That link you included in your comment takes me to an app I already have. I included the screen shot of what the page looks like earlier when looking for the "data section id". I'll included an other photo.

 

Thanks again

 

On 10/19/2022 at 7:34 PM, JTeich said:

Hello,

Thanks so much for your help.  That link you included in your comment takes me to an app I already have. I included the screen shot of what the page looks like earlier when looking for the "data section id". I'll included an other photo.

 

Thanks again

 

data-section-id, if you use 7.1

If you use 7.0 & Index template, you can target Index Section ID.

If the template doesn't support Index page & is not 7.1, no way to target with tool

You can share link to page where you have problem, we can check & give id for you

36 minutes ago, tuanphan said:

data-section-id, if you use 7.1

If you use 7.0 & Index template, you can target Index Section ID.

If the template doesn't support Index page & is not 7.1, no way to target with tool

You can share link to page where you have problem, we can check & give id for you

I would love your help! 

The page is version 7.0 Hyde template (Brine family). 

I'm not using an index page, but i guess i could try to change it?

The page is https://africanaeconomics.com/diverse-economies-for-youth

Thank you so much!

On 10/23/2022 at 9:11 AM, JTeich said:

I would love your help! 

The page is version 7.0 Hyde template (Brine family). 

I'm not using an index page, but i guess i could try to change it?

The page is https://africanaeconomics.com/diverse-economies-for-youth

Thank you so much!

Which elements you want to change order on this page?

1 hour ago, tuanphan said:

Which elements you want to change order on this page?

Hello! Thank you so much!

Everything is in proper order if looked at in a full sized screen. The first two images reflect this with "Episode 1: Dr Michelle Stack", and her podcast right under her blurb (i have a separate question asking if the audio file can pop out in its own window).  Then I have "Episode 2. Upcoming" Dr. Sharon Austin's profile, and will have her podcast below (or hopefully in a pop out window).
I've attached images of what it looks like on mobile, where it bunches "episode 1: Dr. Michelle Stack" and "Episode 2: Upcoming" together, then the two blurbs of the guests, then Dr. Stacks audio file last.  

It would be great if the order on mobile could match the (proper) order on full screen size.

Thank you so so much!!

(So again, first two images: proper order; last three images: mobile view has it all jumbled)

S