I have setup a row with 6 SiteOrigin images for desktop view on my shop main page for categories. On Mobile these images collapse to 1 Image per row but I need it to be 2 images per row. I have tried the Additional CSS Code below which I added to my theme which most support forums refer to make the images scale smaller but it still collapses after each image even though the image size is less than 50% including the margins. Can someone help perhaps to ensure 2 images displayed on mobile per row ? My knowledge on CSS and programming is very little.
@media only screen and (max-width: 767px) {
img {
width: 46%;
}
}
Hi Johan
Thanks for reaching out.
The CSS posted in your query will target the images, to change the collapse behavior you’d need to target the containers involved.
Page Builder rows have the option to change the collapse order (left to right or right to left). It’s also possible to turn column collapse off. Unfortunately, at the moment, it isn’t possible to change the columns per row based on a responsive breakpoint.
Due to limited resources, our free support scope covers basic usage and troubleshooting. We’re able to assist with Custom CSS changes of this nature within our SiteOrigin Premium support scope where we have the budget to do so.