Size of product images on mobile

[Juliedesiree]

Hi,

I have an issue with the size of my product images on my frontpage, only when entering from a mobilephone or tablet.

I have 2 product carrousels on my frontpage, with 9 product pictures. I would prefer if the imagesize fit the screen, but it’s very small and left aligned.

Is there an easy way for me to make the images bigger, and fitted to the screen + centered instead?

Best regards,
Julie

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css;

@media only screen and (max-width: 479px) { 
.woocommerce .products .product.product-layout-grid {
  width: 100%!important;
}
}

– Kyle

[Juliedesiree]

Hmm, doesn’t seem to work?

I have cleared cache, but nothing has changed.

Any other ideas? 🙂

[Kyle – SUPPORT]

You have this in your custom css:

add_filter('show_admin_bar', '__return_false');

You need to remove that, it’s not CSS

– Kyle

[Juliedesiree]

Ohh Kyle, are you just the man of the day.

Thank you so much 🙂

[Kyle – SUPPORT]

No problem 🙂

[Juliedesiree]

Oh Kyle, I just realized that this didn’t help with the issue I had. The css code you gave me, also made the product pages show the images in big size, one by one, so cat’s have to scroll a lot more.

I prefer the product pages to show the product thumbnails 2 and 2, side by side.

Is there any way I can have the product images on my product pages shown as usual, and the code then just is added to the frontpage images?

If it makes any sense at all…

[Rui Guerreiro – SUPPORT]

Hi,

Just made a little change in Kyle code.

Try this one.

@media only screen and (max-width: 479px) { 
.home .woocommerce .products .product.product-layout-grid {
  width: 100%!important;
}
}

-Rui