Product display in shop page is to wide

Shapely
1

Hello,

In the shop page, in mobile, the product are too far off each other and the button is out of the screen. See attached print screen. Is it possible to display the product closer to one another? And also display the product within the screen?

Best

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to add some margin and move the elements to the right by going to Appearance > Customize > Additional CSS and pasting it there.


@media only screen and (max-width: 500px) {
.woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n), .woocommerce-page[class*=columns-] ul.products li.product:nth-child(2n), .woocommerce[class*=columns-] ul.products li.product:nth-child(2n) {
    float: left;
    clear: none!important;
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
    margin-right: 57px;
}
}

Best Regards,
Support

3

Thanks,

I guess that the button is to wide for smaller mobiles, but when there is a bigger screen on the mobile it looks good. Is it possible to align the image and the text center over the button?

Also maybe, is it possible to make the image a little bit bigger? so maybe they are as wide as the button?

Best

4

Hello!

Please add this code in Additional CSS:


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

Is that better? Please let me know how it goes!

Best wishes,
Mihaela

5

Thanks!

6

Hi, there

Nice, to hear your problem is fixed:)
I will now close the topic and mark it as resolved. Feel free to contact us again Thanks!