How to stack mobile images 2x2 with CSS?

[MKrantz]

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

[PageFly-Oliver]

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

<style>
[data-section-id="image_row_yegURg"].image-row__image{
width:calc(50% - 20px) !important
 }
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[MKrantz]

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

<style data-shopify>
.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%;
}
</style>

[MKrantz]

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" %}

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