Dawn Theme Image With Text, Make Image Under Text On Mobile

Store Design
,
1

Hello, I am using the shopify Dawn theme.

For one of the image with text section I would like to make the image appear after the text, however on mobile the image always appears first, how can I fix this?

moosh44_0-1681733676329.png
moosh44_0-1681733676329.png400×149 19.2 KB

URL: https://bliskbeauty.myshopify.com/products/face-eye-mask-soothing-duo

I only want to make the change to this specific section, I had fixed the issue with the following code added to base.css but it has come back and not working, very strange.

@media screen and (max-width: 749px){
.section-template--18663567556917__e7eb020c-fd9c-4a33-8e9b-bd10583da9f6-padding {
    display: flex;
}
.section-template--18663567556917__e7eb020c-fd9c-4a33-8e9b-bd10583da9f6-padding .image-with-text__media-item.image-with-text__media-item--medium.image-with-text__media-item--middle.grid__item {
    order: 2;
}
}

Thanks in advance :slightly_smiling_face:

2

Hi @moosh44
Its Artzen Technologies! We will be happy to help you today.

You can easily move the text above image.
You have to add a CSS which is flex-direction: column-reverse;

.image-with-text .grid {
flex-direction: column-reverse;
}
You can see the below the screenshot for the result.
In media query for mobile devices add the above mentioned CSS and get the desired result.

Artzen_tech_0-1681734513450.png
Artzen_tech_0-1681734513450.png954×552 55.1 KB

If this solution helped you then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

3

Hello @moosh44

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.section-template--18689396048181__74a1cf54-3e2b-4079-96ea-53b579e664a4-padding {
  display: flex;
}
.section-template--18689396048181__e7eb020c-fd9c-4a33-8e9b-bd10583da9f6-padding.image-with-text .grid {
    flex-direction: column-reverse;
}

If the solution is helpful to you accept and like my post.