Image+Text section : put the text before image on mobile

Shopify Discussion

Topic summary

Shopify Prestige theme: on mobile, the Image + Text section was showing the image above the text; the goal was to place text first.

After receiving the store and product page URLs, a helper provided custom CSS to add at the end of the theme’s stylesheet (referred to as theme.css/style.css). It uses a mobile media query (max-width: 699px), sets the section to flex with column direction, and applies order: 2 to the picture so the image appears below the text.

The first code targeted the “Transition Alimentaire” section via its specific section ID and worked. A second, similar CSS block (with a different section ID) fixed the “RATION QUOTIDIENNE” block as well. Screenshots were shared to pinpoint the affected blocks.

A new participant later reported the approach didn’t work for them and asked where to add the code, noting they couldn’t find style.css and wondering if it can be added elsewhere. The helper queried whether instructions were followed, but no placement guidance or resolution was provided.

Key notes: the fix is section‑ID specific (not a global solution). Status: resolved for the original poster; open for the new user who needs file/placement guidance.

Summarized with AI on January 7. AI used: gpt-5.
1

Hello,

I’m using Prestige theme,

I put a Image+ Text section, and there is an issue on mobile : the image appears before the text and I would like it to be the opposite (Text first then image)

Capture d’écran 2024-01-16 à 19.02.27.png
Capture d’écran 2024-01-16 à 19.02.27.png854×1422 177 KB

Thanks

2

Hi @pongopetfood hope you are doing well,

You did’t provide the store url. so that i can create a code for you.

THnaks

3

Hi,

Here is the store url : 1ba714-2.myshopify.com

PAssword : PONGOPETFOOD!

Thank you so much!!

4

@pongopetfood

Never mind but i am not able to see the above given example on the entire site can you also please share the page url for further clarification :slightly_smiling_face:

Thanks

5

Yes : https://pongopetfood.com/products/croquette-chien-adulte-toutes-tailles

It’s “Transition Alimentaire” (on mobile)

Thanks

6

Hi @pongopetfood

Please paste the below code in your theme.css file

1- Online Store

2- Edit Code

3- Find style.css file from the left nav

4- Paste the code at the end of the file

5- Hit save

@media screen and (max-width: 699px) {
#shopify-section-template–19902224597328__image_with_text_aeyEwD image-with-text {
display: flex;
flex-direction: column;
}
#shopify-section-template–19902224597328__image_with_text_aeyEwD image-with-text picture {
order: 2;
}
}

Thanks

1 Like
7

Great it’s working !!! Thank you so much

8

@pongopetfood

Thank you so much for your kind words :slightly_smiling_face:

Best Regards

9

hi again,

Now I have the same issue for the block just below… " RATION QUOTIDIENNE", do you have a code ?

Thank you for your help!!

10

@pongopetfood

yes sure can you please show me in screenshot which block you are talking.

Thanks

11

sure : https://pongopetfood.com/products/croquette-chien-adulte-toutes-tailles

It’s this one, but the issue is still on mobile :

Capture d’écran 2024-01-17 à 13.37.03.png
Capture d’écran 2024-01-17 à 13.37.03.png2190×764 175 KB

Thanksss

12

@pongopetfood

please add this code too

@media screen and (max-width: 699px) {
#shopify-section-template–19902224597328__image_with_text_a3FJ7k image-with-text{
display: flex;
flex-direction: column;
}
#shopify-section-template–19902224597328__image_with_text_a3FJ7k image-with-text picture {
order: 2;
}
}

Thanks

13

That’s perfect!!! Thank you so much !!

1 Like
14

@pongopetfood :slightly_smiling_face: appreciated

15

Hi! I tried doing this for my store and it didn’t work. For mobile view, I need the text above the image. If you have any ideas I would greatly appreciate the help.

16

Hi @Joi_Johnston

did you put the same code which i sent you and followed the instruction.?

Thanks

17

Can I add it base? I can’t find the style.css file