How do I add two columns for the products on mobile?

Site URL: https://www.fidesignshome.com/

How do I make all my product pages + Shop the look and Last chance page have two columns of product instead of one for both products and related products on only the mobile view?

Thanks in advance.

Esther

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1587412348279_39652 .summary-item-list {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
}

Thank you, but I don't think it worked. It didn't change the one column to two columns on the mobile.

Can you insert the code & I will check again?

On 6/8/2020 at 8:39 PM, tuanphan said:

Can you insert the code & I will check again?

Okay, I inserted the code and saved it. 

On 6/8/2020 at 8:39 PM, tuanphan said:

Can you insert the code & I will check again?

It actually works! But only for on the "shop the look" page under Natural Oasis, Furniture. How can I do this for all the products for every page?

Is there a way to add a little space in between the 2 columns of the products, they look a bit too close together.

Also, the "see all" button after the Natural Oasis Furniture category looks too close to the product above, is there a way to space it out?

Thank you so much! I appreciate your help!