Jump to content

Mobile Stacking Order (7.1)

Go to solution Solved by tuanphan,

Recommended Posts

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 by jorohaco
Removing redundancies
Link to comment
  • Solution

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;
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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.

Screenshot 2022-05-12 at 14.43.08.png

Edited by GBD
Link to comment
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

Screenshot 2022-05-12 at 14.43.08.png

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;

  }

}

}

Link to comment
  • 1 month later...

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
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (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.