Re: Change the order in the "image with text"

Solved

Change the order in the "image with text"

Mdb_Gioto
Excursionist
49 0 17

As I said, we need to change the order of this "image with text" section only on Mobile.

 

Til now we have the text and then the image, but we need the image first.

Only in these 2 sections and  only on Mobile

 

This is my store link: https://gioto-1308.myshopify.com/

Can you help me?

 

and these are the sections:

Screenshot 2024-05-22 at 13.42.39.png

Screenshot 2024-05-22 at 13.43.05.png

  

Accepted Solution (1)
Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

The previous code should be removed as you currently have it.

 

I see that you almost have the problem solved then. To make the other two sections look as they were before, add this code to your styles.css file:

 

@media (max-width: 767.98px) {
#shopify-section-template--19215236301067__image_with_text_kyCac3 .flexible-layout, #shopify-section-template--19215236301067__image_with_text_CeYFR9 .flexible-layout {
        flex-direction: column-reverse;
    }
}

 

 

Results:

 

1.PNG2.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 5 (5)

Spac-es
Shopify Partner
406 119 153

Delete this code in your styles.css file (line 11768):

    .section-image-with-text .flexible-layout {
        flex-direction: column-reverse;
    }

The image will appear before the text on mobile devices:

 

result.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Mdb_Gioto
Excursionist
49 0 17

Thanks, but now all the Images with text sections have changed. I need to change the order only on those 2 sections, is it possible?

Spac-es
Shopify Partner
406 119 153

This is an accepted solution.

The previous code should be removed as you currently have it.

 

I see that you almost have the problem solved then. To make the other two sections look as they were before, add this code to your styles.css file:

 

@media (max-width: 767.98px) {
#shopify-section-template--19215236301067__image_with_text_kyCac3 .flexible-layout, #shopify-section-template--19215236301067__image_with_text_CeYFR9 .flexible-layout {
        flex-direction: column-reverse;
    }
}

 

 

Results:

 

1.PNG2.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Mdb_Gioto
Excursionist
49 0 17

thank you soo much

Mdb_Gioto
Excursionist
49 0 17

I just copied the code, but it changes all the sections, is there something I'm missing?