SalmaMaged Posted June 13, 2022 Share Posted June 13, 2022 Site URL: https://www.leep4impact.org Site URL: leep4impact.org Hello! We need to edit the mobile layout of our website, so the arrangement of text and image blocks make sense the same way they do on desktop. On desktop, text and image blocks are alternating being on the right side and the left side of the page every section in specific pages (see attached screenshots). However, for mobile, we want the layout to always be image first and text below it or vice versa. Can anyone please advise on the required CSS to do this. Thank you! Link to comment
tuanphan Posted June 14, 2022 Share Posted June 14, 2022 First screenshot, add to Design > Custom CSS @media screen and (max-width:640px) { div#page-6176809c9afa7b11c8ddc75d>.row { display: flex; flex-direction: column-reverse; } } Second screenshot, which page are you referring to? SalmaMaged 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
SalmaMaged Posted June 14, 2022 Author Share Posted June 14, 2022 @tuanphan, thank you so much! The code worked like magic. The second screenshot refers to the Our Journey page (https://www.leep4impact.org/our-journey) Thanks a lot! Link to comment
tuanphan Posted June 15, 2022 Share Posted June 15, 2022 14 hours ago, SalmaMaged said: @tuanphan, thank you so much! The code worked like magic. The second screenshot refers to the Our Journey page (https://www.leep4impact.org/our-journey) Thanks a lot! Use this new code @media screen and (max-width:640px) { div#page-6176809c9afa7b11c8ddc75d>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10>.row { display: flex; flex-direction: column-reverse; } } Do you need to align left text? 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
SalmaMaged Posted June 16, 2022 Author Share Posted June 16, 2022 On 6/15/2022 at 5:09 AM, tuanphan said: Use this new code @media screen and (max-width:640px) { div#page-6176809c9afa7b11c8ddc75d>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10>.row { display: flex; flex-direction: column-reverse; } } Do you need to align left text? Thank you so much, @tuanphan. The code worked! And you're right, the text alignment needs to be changed on mobile as well. I also wonder if you have an idea for how to make the text block break the green timeline in the background on mobile so it doesn't pass through the text and make it hard to read. Link to comment
Solution tuanphan Posted June 16, 2022 Solution Share Posted June 16, 2022 Use this new code @media screen and (max-width:640px) { div#page-6176809c9afa7b11c8ddc75d>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-4 * { text-align: left !important; } div#block-yui_3_17_2_1_1636914209941_9889+.row .span-6 * { text-align: left !important; } div#page-61b467464417d958a54c6e68 .html-block { background-color: #32a389; } } 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
SalmaMaged Posted June 16, 2022 Author Share Posted June 16, 2022 2 hours ago, tuanphan said: Use this new code @media screen and (max-width:640px) { div#page-6176809c9afa7b11c8ddc75d>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-4 * { text-align: left !important; } div#block-yui_3_17_2_1_1636914209941_9889+.row .span-6 * { text-align: left !important; } div#page-61b467464417d958a54c6e68 .html-block { background-color: #32a389; } } Thanks a lot, @tuanphan. The code worked very well. Thanks again for your help - it is highly appreciated! Link to comment
SalmaMaged Posted June 16, 2022 Author Share Posted June 16, 2022 9 hours ago, tuanphan said: Use this new code @media screen and (max-width:640px) { div#page-6176809c9afa7b11c8ddc75d>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10>.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-4 * { text-align: left !important; } div#block-yui_3_17_2_1_1636914209941_9889+.row .span-6 * { text-align: left !important; } div#page-61b467464417d958a54c6e68 .html-block { background-color: #32a389; } } Hey @tuanphan, I need to replicate the code you have provided to swap the image and text blocks and change the text alignment to edit the other sections of the entire page. I tried changing the block id to match the other sections, but it doesn't seem to work. The code works perfectly for the specific sections you did the code for, so clearly, I'm doing something wrong that I don't know what it is For example, to swap the image and text blocks in the section referred to by the first screenshot, I used this code which didn't work: @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1636914209941_9889+.row .span-12>.row { display: flex; flex-direction: column-reverse; } } And to switch the text alignment in the section referred to by the second screenshot, I used this code which didn't work: @media screen and (max-width:640px) { div#block-8e48b8ed37a660909299+.row .span-4 * { text-align: center !important; } } Based on what you see, can you please advise on what is it that I'm doing wrong while replicating the code? Link to comment
SalmaMaged Posted June 20, 2022 Author Share Posted June 20, 2022 On 6/16/2022 at 4:42 PM, SalmaMaged said: Hey @tuanphan, I need to replicate the code you have provided to swap the image and text blocks and change the text alignment to edit the other sections of the entire page. I tried changing the block id to match the other sections, but it doesn't seem to work. The code works perfectly for the specific sections you did the code for, so clearly, I'm doing something wrong that I don't know what it is For example, to swap the image and text blocks in the section referred to by the first screenshot, I used this code which didn't work: @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1636914209941_9889+.row .span-12>.row { display: flex; flex-direction: column-reverse; } } And to switch the text alignment in the section referred to by the second screenshot, I used this code which didn't work: @media screen and (max-width:640px) { div#block-8e48b8ed37a660909299+.row .span-4 * { text-align: center !important; } } Based on what you see, can you please advise on what is it that I'm doing wrong while replicating the code? Hey @tuanphan, Hope you had a great weekend! I wonder if you had a chance to look at my reply. Thanks a lot! Link to comment
tuanphan Posted June 20, 2022 Share Posted June 20, 2022 On 6/16/2022 at 9:42 PM, SalmaMaged said: Hey @tuanphan, I need to replicate the code you have provided to swap the image and text blocks and change the text alignment to edit the other sections of the entire page. I tried changing the block id to match the other sections, but it doesn't seem to work. The code works perfectly for the specific sections you did the code for, so clearly, I'm doing something wrong that I don't know what it is For example, to swap the image and text blocks in the section referred to by the first screenshot, I used this code which didn't work: @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1636914209941_9889+.row .span-12>.row { display: flex; flex-direction: column-reverse; } } And to switch the text alignment in the section referred to by the second screenshot, I used this code which didn't work: @media screen and (max-width:640px) { div#block-8e48b8ed37a660909299+.row .span-4 * { text-align: center !important; } } Based on what you see, can you please advise on what is it that I'm doing wrong while replicating the code? You mean change order of text/image in screenshots on mobile? Site URL: https://www.leep4impact.org Site URL: leep4impact.org 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
SalmaMaged Posted June 20, 2022 Author Share Posted June 20, 2022 2 minutes ago, tuanphan said: You mean change order of text/image in screenshots on mobile? Site URL: https://www.leep4impact.org Site URL: leep4impact.org Yes, for the Our Journey page (https://www.leep4impact.org/our-journey). There are five sections on the page (from 2017 to 2021). What I was trying is to apply the code you have provided to swap the image and text blocks and change text alignment on mobile for the 2021 section on other sections. I tried changing the block id and replicating the rest of the code but that didn't seem to work. Link to comment
tuanphan Posted June 20, 2022 Share Posted June 20, 2022 14 hours ago, SalmaMaged said: Yes, for the Our Journey page (https://www.leep4impact.org/our-journey). There are five sections on the page (from 2017 to 2021). What I was trying is to apply the code you have provided to swap the image and text blocks and change text alignment on mobile for the 2021 section on other sections. I tried changing the block id and replicating the rest of the code but that didn't seem to work. Add this CSS /* Our Journey mobile */ @media screen and (max-width:640px) { /* the standford */ div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10 .row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10 .row * { text-align: left !important; } /* internal */ div#block-yui_3_17_2_1_1636914209941_9889+.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1636914209941_9889+.row * { text-align: left !important; }} 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
SalmaMaged Posted June 21, 2022 Author Share Posted June 21, 2022 19 hours ago, tuanphan said: Add this CSS /* Our Journey mobile */ @media screen and (max-width:640px) { /* the standford */ div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10 .row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1640102892084_122855+.row .span-10 .row * { text-align: left !important; } /* internal */ div#block-yui_3_17_2_1_1636914209941_9889+.row { display: flex; flex-direction: column-reverse; } div#block-yui_3_17_2_1_1636914209941_9889+.row * { text-align: left !important; }} Thank you so much, @tuanphan. It all seems to be perfectly working now except for one issue - for some reason, I can't change the text alignment in this section (screenshot below). If you can please help me with this one as well. Thanks a lot! Link to comment
tuanphan Posted June 22, 2022 Share Posted June 22, 2022 13 hours ago, SalmaMaged said: Thank you so much, @tuanphan. It all seems to be perfectly working now except for one issue - for some reason, I can't change the text alignment in this section (screenshot below). If you can please help me with this one as well. Thanks a lot! This ID div#block-yui_3_17_2_1_1636915909376_26891 * { text-align: left !important; } 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
SalmaMaged Posted June 22, 2022 Author Share Posted June 22, 2022 4 minutes ago, tuanphan said: This ID div#block-yui_3_17_2_1_1636915909376_26891 * { text-align: left !important; } Perfect! Thanks a million, @tuanphan, I truly appreciate your help. 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