jorohaco Posted May 1, 2020 Share Posted May 1, 2020 (edited) Site URL: https://carillon-flower-3xhs.squarespace.com/ Hello. I need to modify the mobile stacking order of content in a 3-column image/text/spacer layout. Site password: XRdesign Jump or scroll to the "Process" section. For larger displays, the order of the content blocks is: ROW A: Image — spacer — Text ROW B: Text — spacer — Image ... rinse and repeat. On mobile they all need to follow one pattern: COLUMN: Image — spacer — Text I've done a search on this and there were a number of threads covering but they all kind of dead-end(ed). I honestly feel like a fix to this should have been baked into 7.0 since it's such a common UI pattern. Any help would be appreciated. And thank you! 🙏 Edited May 2, 2020 by jorohaco Removing redundancies Link to comment
Solution tuanphan Posted May 5, 2020 Solution Share Posted May 5, 2020 Add to Home > design > custom CSS @media screen and (max-width:640px) { /* 2 */ div#block-yui_3_17_2_1_1578277238401_75781+.row { display: flex; flex-direction: column-reverse; } /* 4 */ div#block-yui_3_17_2_1_1578780160732_20104+.row { display: flex; flex-direction: column-reverse; } } jorohaco and FatFatAlbert 1 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
jorohaco Posted May 5, 2020 Author Share Posted May 5, 2020 Thank you sooo much @tuanphan. That worked like magic, and just in time for my client meeting in 2 minutes! #lifesaver 🤗🤗🤗 Link to comment
kevinkamis Posted June 1, 2020 Share Posted June 1, 2020 I believe I am looking to do something similar to this. Looking for images to stack 2 across on a mobile device. On a desktop the page is set to have 4 columns, I am looking for it have 2 on a mobile device. Any help with this would be much appreciated. I would also like to understand how I can apply this technique to other pages. URL: https://kamiscollection.com/photography Link to comment
tuanphan Posted June 2, 2020 Share Posted June 2, 2020 14 hours ago, kevinkamis said: I believe I am looking to do something similar to this. Looking for images to stack 2 across on a mobile device. On a desktop the page is set to have 4 columns, I am looking for it have 2 on a mobile device. Any help with this would be much appreciated. I would also like to understand how I can apply this technique to other pages. URL: https://kamiscollection.com/photography You can change gallery to grid, then I can give the code to stack 2 images on mobile. The current layout is difficult to use code. 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
FatFatAlbert Posted February 24, 2021 Share Posted February 24, 2021 How does this work? Looking at the original solution. I can see that it works and I've translated it successfully to one of my sites but with another I can't get it to work. The block #block-yui_3_17_2_1_1578277238401_75781 seems to be the spacer above the two blocks that the OP wanted to switch on mobile- is that correct? Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 On 2/24/2021 at 8:00 PM, FatFatAlbert said: How does this work? Looking at the original solution. I can see that it works and I've translated it successfully to one of my sites but with another I can't get it to work. The block #block-yui_3_17_2_1_1578277238401_75781 seems to be the spacer above the two blocks that the OP wanted to switch on mobile- is that correct? Can you share link to page where you have problem? We can help easier 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
GBD Posted May 12, 2022 Share Posted May 12, 2022 (edited) Hi @tuanphan I'm looking to do something similar if you're able to help, please? Currently have alternating left & right staff profiles which is great on desktop but need to stack Image over copy on mobile. Edited May 13, 2022 by GBD Link to comment
GBD Posted May 13, 2022 Share Posted May 13, 2022 22 hours ago, GBD said: Hi @tuanphan I'm looking to do something similar if you're able to help, please? Currently have alternating left & right staff profiles which is great on desktop but need to stack Image over copy on mobile. Site: https://fuchsia-burgundy-n6es.squarespace.com/who-we-are Password: TCC_2022 Found the fix for this if it's useful to anyone - apply to each data section as needed: //Reverse block order on mobile// section[data-section-id="000000000000000000"] { .content-wrapper { padding-top: 0!important; } @media screen and (max-width: 767px) { .sqs-row { display: flex; flex-direction: column-reverse; } } } tuanphan 1 Link to comment
kdkovacs Posted June 23, 2022 Share Posted June 23, 2022 Hey @tuanphan, I also need help with mobile stacking order. Ask you can see in Desktop view, in the Projects section, the text on right is associated with the image on the left. So In the Projects section, on mobile, I need the photo to stack above the associated text in the right order. It should go photo > text > photo > text on down the list. Also, on Desktop, in the projects section, is there a way to maintain the vertical spacing between project entries responsively so the top of the photo is always aligned to the top of the associated text box on the right? Site URL: https://coyote-lynx-l6l3.squarespace.com/ Password: 1 Can you help? Thank you! Link to comment
tuanphan Posted June 24, 2022 Share Posted June 24, 2022 16 hours ago, kdkovacs said: Hey @tuanphan, I also need help with mobile stacking order. Ask you can see in Desktop view, in the Projects section, the text on right is associated with the image on the left. So In the Projects section, on mobile, I need the photo to stack above the associated text in the right order. It should go photo > text > photo > text on down the list. Also, on Desktop, in the projects section, is there a way to maintain the vertical spacing between project entries responsively so the top of the photo is always aligned to the top of the associated text box on the right? Site URL: https://coyote-lynx-l6l3.squarespace.com/ Password: 1 Can you help? Thank you! Hi, This is not possible if you keep green line between image/text. 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
kdkovacs Posted June 30, 2022 Share Posted June 30, 2022 Hi @tuanphan thanks for your reply. Are both questions not possible? What about just the first question about mobile stacking order? I hid the vertical line on mobile. Thank you! Link to comment
tuanphan Posted July 1, 2022 Share Posted July 1, 2022 19 hours ago, kdkovacs said: Hi @tuanphan thanks for your reply. Are both questions not possible? What about just the first question about mobile stacking order? I hid the vertical line on mobile. Thank you! I see both looks fine?? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment