Problem mobile site products

Hi @djarmo!

To show two columns on your store please use the following code under Appearance > Customize > Additional CSS.

@media only screen and (max-width:768px) {
    .woocommerce-page ul.products{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
         flex-flow: row wrap;
    }
    .woocommerce-page ul.products li.product{
         flex: 0 0 50%;
         -webkit-box-flex: 0;
         padding: 10px;
    }

Let us know how it goes 🙂

Hi @djarmo!

Thank you for trying that. Checking your site at: https://www.xmybijoux.nl/winkel/ I can see that the products are now on two columns.

Here is a screenshot of what I can see on my end: d.pr/i/96xWto

Am I missing something? Please feel free to let me know and we will take another look at this 🙂

Hi there!

To have two columns on mobile on the home page, I’ve modified the code sent by my colleague @rdeari a bit:

@media only screen and (max-width:768px) {
.page-template-template-homepage-php ul.products{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
         flex-flow: row wrap;
    }
.page-template-template-homepage-php ul.products li.product{
         flex: 0 0 50%;
         -webkit-box-flex: 0;
         padding: 10px;
    }
}

I hope this helps! 🙂

Hi there @djarmo!

I don’t see the CSS I shared on your home page.

When I apply it on your home page via browser style editor, it works well.

Can you confirm if it is added under Appearance > Customize > Additional CSS?