Responsiveness issues

Shapely
1

Hi there,

I am having some troubles with the mobile version of my website :

  1. Some banners (not all of them) appear really small.
  2. There is a huge grey space below the banners.
  3. The right side product does not fit in the screen

Here is the url of a page with a banner ok on computer / not ok on mobile : https://laboutiqueiberique.com/index.php/categorie-produit/jambon/jambon_pn/

I would appreciate your help a lot! Thanks in advance.

Gaëtan

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to fix the issue on mobile by going to Appearance > Customize > Additional CSS and pasting it there.


@media only screen and (max-width: 700px) {
.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
    margin-right: 47px;
}
}

As for the banner image, because the height is so small it will look weird on smaller devices so it would be better to use a larger banner so that it can adjust better.

Best Regards,
Support

3

Thank you very much!
Really appreciate your help every time I have a problem.
Have a great day.
Gaëtan

4

Hello there,

Happy to help.

Is there anything else you need help with regarding this issue?

Best Regards,
Support

5

No thanks, you can close it.

6

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support