Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile Stacking Order (7.1)


jorohaco
Go to solution Solved by tuanphan,

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

7 answers to this question

Recommended Posts

  • 0

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

}

 

Link to post
  • 0

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 post
  • 0
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.

Link to post
  • 0

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 post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...