Solved

Image With Text - how to make image second on mobile

kckc2022
Tourist
10 0 1

The default for the "image with text" section on mobile is to show image first then text below it. How can I change this so that the text shows first and then the image is below it?

Accepted Solution (1)

thirtycoders
Shopify Partner
135 21 26

This is an accepted solution.

Hi @kckc2022,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

@media (max-width: 768px) {
    .image-with-text__grid.grid.grid--gapless {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}


Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 5 (5)

thirtycoders
Shopify Partner
135 21 26

Please share your store url @kckc2022 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
kckc2022
Tourist
10 0 1

thirtycoders
Shopify Partner
135 21 26

This is an accepted solution.

Hi @kckc2022,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

@media (max-width: 768px) {
    .image-with-text__grid.grid.grid--gapless {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}


Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
kckc2022
Tourist
10 0 1

That worked! Thank you!

thirtycoders
Shopify Partner
135 21 26

You're welcome! 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com