How to view two products per row on mobile view on collection page/ product grid?

[peytonbucher]

Hey guys! 

I'm wanting to show about 4 products at a time on mobile view, with two products per row instead of one. I think it will make my collection pages look so much more professional! I've tried so many troubleshooting suggestions and I just can't figure out how to do it. I'm currently using Monaco theme

[theycallmemakka]

Hi @peytonbucher ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
@media only screen and (max-width: 750px) {
    .collection-product-list {
        grid-template-columns: 1fr 1fr!important;
    }
}
</style>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka