Two column product grid on Mobile menu

[aerosum]

Hi,

The product images on big screen mobiles are looking quite enormous.

Is there a way I could put a two column product grid on mobile portrait view? It is already a two column layout on landscape mode.

I think it should be very simple to do. I would really like your help here and as quick as possible.

Regards
Sumit

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (max-width: 479px) { 
.woocommerce .products .product {
  float: left;
  width: 50%;
}
}

– Kyle

[aerosum]

hey thanks,

Can you please also tell where do I add custom CSS.

I apologize if I am asking some very easy question 🙁

[aerosum]

Found it, thanks..
And it is looking exactly what I wanted..

You guys and your theme are simply, Awesome !

[Kyle – SUPPORT]

No problem 🙂

[aerosum]

Ah.. Sorry to bug again. Adding this code removed the add to cart small button which was coming on the image itself.

Can you please tell how can I get it back?

[Kyle – SUPPORT]

Hi

Can you provide your link so I can check?

– Kyle

[aerosum]

This reply has been marked as private.

[aerosum]

Sent you the link privately. Open it on a mobile or through browser in Mobile view.

[Kyle – SUPPORT]

It’s removed on purpose as it will cover the image if it’s shown, this is bad for user experience

– Kyle

[aerosum]

Hi,

Sorry I am coming back to the same thread. I need your help here again.

Since, the add to cart button which comes over the image has been removed I need a button at the bottom of description. I added this by turning it on in the theme options But this button should come only on phone and on the desktop version it should continue to show the add to cart button on image which comes when we hover.

How can I make it visible only on mobile?

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (max-width: 767px) { 
.products .product.buy-btn-visible > .product-actions {
  display: none;
}
}

– Kyle

[aerosum]

Hey,

thanks for the reply. I tried but it doesn’t seem to work 🙁

[Kyle – SUPPORT]

Sorry, should be:

@media only screen and (min-width: 769px) { 
.products .product.buy-btn-visible > .product-actions {
  display: none;
}
}

– Kyle