How to maintain 100% image size with text below in mobile view?

Store Design
1

Hi there,

I am hoping this to be a rather simple question.

In mobile view, the image size is changing depending on if I change the text position from above to below. I want to keep the text below the image, but when doing that, the image size gets smaller.

Can anyone propose a code, making the image 100% in size when the text is below the image?

I am using the Debut theme.

Thanks a lot!

Eirik

E_Stensrud_1-1659710570195.png
E_Stensrud_1-1659710570195.png680×1098 104 KB

VS

E_Stensrud_2-1659710601132.png
E_Stensrud_2-1659710601132.png686×964 73.8 KB

E_Stensrud_3-1659710629738.png
E_Stensrud_3-1659710629738.png652×690 52.8 KB

2

Hi @E_Stensrud , not really sure how are you changing their places, I’m testing debut theme, and adding:

flex-direction: column-reverse;

And this works fine, take a look:

Screenshot 2022-08-05 at 18.16.22.png
Screenshot 2022-08-05 at 18.16.22.png453×584 108 KB

Screenshot 2022-08-05 at 18.16.33.png
Screenshot 2022-08-05 at 18.16.33.png429×597 108 KB

3

Hi Marina,

Thank you, yes that looks great. Does that apply for mobile phone only? In desktop format I want the text position to be as it is (right/left side of the images).

Can you please walk me through the process on where I apply this code? With editing code I only know the very basic :slightly_smiling_face:

Thank you so much!

Eirik