How do I reorder images for left and right aligned images on mobile?

Store Design
1

Hi there,

My images don’t show on mobile for right and left aligned images. I also want the images to populate above the text on mobile. Can someone please help?

https://maryandmason.co.nz/?_ab=0&_fd=0&_sc=1&key=bf7a1d0e12a40b594d57caf77237499fd91a7c0b10d1603a08cfc3b98e0e2e88

Navigate to OUR PEOPLE → OUR COMMUNITY for an example of where this happens on mobile.

Thanks,

Dean

2

Can you share the screenshot please?

3

heyspang_0-1628237738670.png
heyspang_0-1628237738670.png744×1008 57.2 KB

heyspang_1-1628237772394.png
heyspang_1-1628237772394.png742×860 45.5 KB

4

These have images at wider widths but they don’t show up on mobile. I also want to images to be above the text on mobile rather than below.

5

Here’s a video of it

6 
@media only screen and(max-width:750px){
.FeatureText.FeatureText--withImage.FeatureText--imageRight {
    display: block;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

7

Hi there,

That doesn’t work for me. Can you please check again?

Thanks

8

Oh it’s working now thank you! Do you also know how to show the image at the top above the text rather than below?

9 
@media only screen and(max-width:640px){
.FeatureText.FeatureText--withImage.FeatureText--imageRight {
    flex-direction: column-reverse;
    display: flex;
}

.FeatureText.FeatureText--withImage.FeatureText--imageLeft {
    display: flex !important;
    flex-direction: column !important;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

note : if you have already this media 640px then css in it. no need to add extra media!