Gattinomio Posted December 2, 2021 Share Posted December 2, 2021 (edited) 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 Link to comment
tuanphan Posted December 4, 2021 Share Posted December 4, 2021 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; } } Gattinomio 1 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
Gattinomio Posted December 8, 2021 Author Share Posted December 8, 2021 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 Link to comment
amacarv Posted January 25, 2022 Share Posted January 25, 2022 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 Link to comment
tuanphan Posted January 26, 2022 Share Posted January 26, 2022 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; } } 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
JTeich Posted October 17, 2022 Share Posted October 17, 2022 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 Link to comment
tuanphan Posted October 19, 2022 Share Posted October 19, 2022 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 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
JTeich Posted October 19, 2022 Share Posted October 19, 2022 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 Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 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 JTeich 1 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
JTeich Posted October 23, 2022 Share Posted October 23, 2022 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! Link to comment
tuanphan Posted October 27, 2022 Share Posted October 27, 2022 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? 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
JTeich Posted October 27, 2022 Share Posted October 27, 2022 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment