I am using the avia layout builder to create a row of 4 columns. I want these to stack when the screen width is narrower so that a tablet would show a grid of 2×2 and a mobile would be 1×4. How do I do this? The current behaviour shows 4 colums for screen sizes above 782px and then switches to 1 per row below that. This makes the boxes really big and leaves a big gap.
How can I have it display 2 items per row for lets say anything between 520 and 782? The product grid works great and does exactly what I want, I just need to copy this behviour.
I assume this can be done with media queries and CSS. Can anyone help?
Many thanks
Hey lol4000,
Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
Basilis