How to stack mobile images 2x2 with CSS?

Store Design
, , ,
1

Our theme uses the image row section but on mobile it keeps the 4 images across and I would like to stack them 2x2.

I know this is in the CSS but having hard time finding what to tweak.

Any help would be greatly appreciated.

https://orbitbaby.com/pages/orbitbaby

2

Hi @MKrantz ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

3

Hi @PageFly-Oliver Tried that but did not work. It looks like there is some styling on the theme section template. Here is the code. I assume there needs to be an @mobile query. Reminder that I like the 4 across for desktop. I am just trying to get it to stack 2x2 when on mobile.

https://orbitbaby.com/products/g5-infant-car-seat

.image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--1 { margin: 0 0 1% 1%; width: 23.75% !important; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--1:after { padding-bottom: 143.5185185185185%; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--2 { margin: 0 0 1% 1%; width: 23.75% !important; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--2:after { padding-bottom: 143.5185185185185%; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--3 { margin: 0 0 1% 1%; width: 23.75% !important; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--3:after { padding-bottom: 143.5185185185185%; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--4 { margin: 0 0 1% 1%; width: 23.75% !important; } .image-row-1162a2b1-d9be-443e-b3a8-14dfff8f81b6--4:after { padding-bottom: 143.5185185185185%; }
4

so this did the trick

and I also want to apply this to only product pages so going to give it {% if product.url contains “/products” %}

@media (max-width: 767px){ .image-row__image{ width:calc(50% - 20px) !important }