webdesign1234 Posted April 18, 2022 Share Posted April 18, 2022 Site URL: http://www.jessicamiller.work How can I reorder the testimonial section on the homepage for mobile so that it's image/text/image/text? I have tried the code below, but I don't think it's working because I have spacers on either side of the testimonial. The 2nd testimonial is what I want to switch on mobile, but the column layout is space/text/image/space. Is there a way to reorder the columns so that it's space/image/text/space? Thanks //Reverse block order on mobile [data-section-id] { .content-wrapper { padding-top: 0!important; } @media screen and (max-width: 767px) { .sqs-row { display: flex; flex-direction: column-reverse; } } } Link to comment
tuanphan Posted April 19, 2022 Share Posted April 19, 2022 Add to Design > Custom CSS /* Testimonials order mobile */ @media screen and (max-width:767px) { div#page-section-624f1396f1979346fccd666e>.row:nth-child(3) { 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
webdesign1234 Posted April 19, 2022 Author Share Posted April 19, 2022 Perfect. THANK YOU! Link to comment
webdesign1234 Posted May 10, 2022 Author Share Posted May 10, 2022 @tuanphan I am trying to replicate this on another site. I am using the same code, but switching out the page section and it's not working for some reason. Site is globalmissionsproject.com This is what I'm using - @media screen and (max-width:767px) { div#page-section-609429372cf1533c90ccb9bb>.row:nth-child(3) { display: flex; flex-direction: column-reverse; }} Link to comment
tuanphan Posted May 13, 2022 Share Posted May 13, 2022 On 5/10/2022 at 10:43 PM, webdesign1234 said: @tuanphan I am trying to replicate this on another site. I am using the same code, but switching out the page section and it's not working for some reason. Site is globalmissionsproject.com This is what I'm using - @media screen and (max-width:767px) { div#page-section-609429372cf1533c90ccb9bb>.row:nth-child(3) { display: flex; flex-direction: column-reverse; }} Which section are you referring to? Can you take a screenshot? 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
webdesign1234 Posted September 19, 2022 Author Share Posted September 19, 2022 @tuanphan Sorry for the late reply. Here is a screenshot... I would like the 2nd image to be above the text. (so that it's image/text/image/text) Website: globalmissionsproject.com Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 18 hours ago, webdesign1234 said: @tuanphan Sorry for the late reply. Here is a screenshot... I would like the 2nd image to be above the text. (so that it's image/text/image/text) Website: globalmissionsproject.com Add to Design > Custom CSS /* Order of text image */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1652193047891_70064+.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
webdesign1234 Posted September 20, 2022 Author Share Posted September 20, 2022 Thanks a bunch! 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