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

Staggered layout column reverse for mobile

Recommended Posts

Site URL: http://vividbooths.co.uk

I have a staggered layout (works well on desktop), but 2 pages on my site need the second row column order reversed for mobile view.   

http://www.vividbooths.co.uk

First is in my home(index). Page title is 'cascadinginfo' and the second row displays 'weddings' section using a card block on the right column, with a separate associated image displayed on the left column.

DesktopView2.thumb.jpg.9f2770b69e2f7f683bb9ad2d8cc63c6b.jpg

 

Mobile view results in the 'weddings' associated image preceding the card block 'weddings' ,  but for continuity, I need the column reversed for mobile view.

 

MobileStackView2.thumb.jpg.bfea7e4129d8a56f82e7b2c4e6c8115d.jpg

I've searched this site extensively. Lots of users have similar problems, and remedial code that should work for me looks like this;

@media screen and (max-width:640px) {
div#yui_3_17_2_1_1589993939235_232+.row.sqs-row {
    display: flex;
    flex-direction: column-reverse;
  } 
div#yui_3_17_2_1_1589993939235_306+.row {
    display: flex;
    flex-direction: column-reverse;
} 
  }

Or this;

@media screen and (max-width:640px) {
/* cascadinginfo-columnreverse */
div#block-yui_3_17_2_1_1593356729679_4534+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Neither is working for me, and I am concerned that I am not sourcing the correct id's from the inspect element on my site because it's not clear to me which one to use. The row id that specifically targets this 'weddings' section is dynamic and can't be used. 

My second page is the bookings page

https://www.vividbooths.co.uk/booking-page

The text is hidden unless viewed on a mobile (because I am using accordion text for desktop), but the same issue on the second row. The 'Choose Your Package' card block appears after the associated text.

1032876845_Screenshot2020-07-19at11_32_33.thumb.png.b8c7dcbb7a8824ce1d32c74ad5ef593e.png

 

Share this post


Link to post

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5ef7ceebf6302b5d71d293d8 .span-12>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-5efdbd87229fe539a8cb8e74 .span-12>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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