Shop page on mobile

Hi, @capsuladefotbal , I’m not a developer for Hestia, but I like to help others who use the theme.

I viewed the device from mobile and saw that there is a CSS rule that is dictating the size of that product “card”:

@media only screen and (max-width: 768px){
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em; }

To address that, I think you should add additional CSS that takes precedence over that style (try adding this additional CSS from the Customizer, Add CSS menu option):

@media only screen and (max-width: 768px)
{
    .woocommerce div.container ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product
    {    
        width: auto;
    }
}

Please note, though, that if you have more products displayed on the page, then this CSS may need to be modified/removed.

Thank you for your response! How can I remove the first CSS rule? Will that solve my problem?

Hi @capsuladefotbal , you can’t really remove the rule, unless you opted to use a different stylesheet than what was supplied with the theme, but rather you override the rule. See https://www.w3schools.com/css/css_specificity.asp.

You just need to add that CSS code that I gave to the Customizer “Additional CSS” CSS box, within the WordPress Customizer interface.

See https://themeisle.com/blog/css-in-wordpress/ for additional info about doing this.

(I did compare your CSS problem to a website that I’m working on that uses Hestia and WooCommerce, and I think the problem may be with your autooptimize plugin doing something to the precedence of the CSS stylesheet rules. Adding my code, though, will at least temporarily fix the problem.

Image attachment for this:
https://imgur.com/LBwOHsl)

Hi @plantprogrammer , thank you for the code, it worked fine and I appreciate what you are doing
Do you happen to know if I can show 2 columns of products in the mobile view? The theme doesn’t mention anything about this as far as I know, so maybe some css will fix it?
Thanks!

Hey @capsuladefotbal , that should certainly be possible.

I just need some time to review the CSS styles necessary for that.

Hi @plantprogrammer,

You can achieve that with CSS:

@media screen and (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
 width: 48%;
}
}

I hope that helps!