Swapping block order to fit mobile layout

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!

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?

@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!

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?

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.  

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!

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?

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! 

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

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. 

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

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!

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

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.