PaulN Posted July 19, 2020 Share Posted July 19, 2020 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. Mobile view results in the 'weddings' associated image preceding the card block 'weddings' , but for continuity, I need the column reversed for mobile view. 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. Link to comment
tuanphan Posted July 19, 2020 Share Posted July 19, 2020 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; } } Max_Sheridan 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
PaulN Posted July 19, 2020 Author Share Posted July 19, 2020 Ha, thanks man. Perfect! Link to comment
Techster Posted November 25, 2021 Share Posted November 25, 2021 Hey Squarespace. I could use some help with the same issue. https://techster.se/cyber-security In the row that mentions - (Service 2). Need to be reversed on mobile. The CSS I'm putting in is the following: @media only screen and (max-width: 767px){ div#yui_3_17_2_1_1637861778225_138.row.sqs-row { display: flex!important; flex-direction: column-reverse!important; } } It works when I do it inspector, but it seems like it won't go through when I put it in the custom CSS field. Link to comment
tuanphan Posted November 29, 2021 Share Posted November 29, 2021 On 11/26/2021 at 12:59 AM, Techster said: Hey Squarespace. I could use some help with the same issue. https://techster.se/cyber-security In the row that mentions - (Service 2). Need to be reversed on mobile. The CSS I'm putting in is the following: @media only screen and (max-width: 767px){ div#yui_3_17_2_1_1637861778225_138.row.sqs-row { display: flex!important; flex-direction: column-reverse!important; } } It works when I do it inspector, but it seems like it won't go through when I put it in the custom CSS field. Use this CSS /* mobile service 2 */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1637759536500_83477+.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
iris286 Posted March 28, 2022 Share Posted March 28, 2022 Hi I'm having the same issue, I want to switch the text and image so that the image shows up first in mobile. I need help on 2 pages - the homepage and the service page. This is the code I used in the homepage which works fine but then it reverts the change once you refresh the page. @media screen and (max-width: 750px){ #yui_3_17_2_1_1648481696735_335{ display: flex !important; flex-direction: column-reverse !important; } } This is the code for the service page @media screen and (max-width: 750px){ #yui_3_17_2_1_1648255616881_358{ display: flex !important; flex-direction: column-reverse !important; } } This is the link to the backend of the website: https://hen-sparrow-ydsa.squarespace.com/config/design password: Luna286 Any help is welcomed! 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