Spacing between products

silviotiago · June 20

Hi

I feel that there's a lot of spacing between images on homepage: (image 1 attached)

If I hover the product I see that by default is like a big square which might be the issue (image 2 attached)

How can I reduce this spacing without having to change image ratio?

I like the way of it is, showing full DVD cover vertically, but I don't like the space between products (both left/right and top/bottom)

Phil · June 21

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

silviotiago · June 21

The URL is: www.ps5digital.pt

Phil · June 21

Try the following CSS code:

.woocommerce .products .product .image_frame img{
 transform: scale(1.2);
}
.woocommerce .products .product .image_frame:hover img{
 transform: scale(1.5);
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS, and check if the results suits you.

Best regards

silviotiago · June 21

Amazing!

That's fixed.

Just about the "bestseller" module on homepage, can we do anything?

https://capture.dropbox.com/EHoVeB9G2alsnvDf

It's with lots of space also, and I can't find option to insert these 4 items: https://capture.dropbox.com/7o7WTj3lUFbygzTS

Phil · June 21

1) Use this code for the slider:

.shop_slider_ul .image_frame img{
    transform: scale(1.2)!important;
}
.shop_slider_ul .image_frame:hover img{
    transform: scale(1.5)!important;
}

2) Currently, there is no option to show these icons. Anyway, we have it on our to-do list.

Best regards

silviotiago · June 21

Also perfect!

Now, last thing.

Didn't fix the mobile version of it, do you have any code for that?

On desktop spacing is great now, but mobile looks too far: https://capture.dropbox.com/qpLw7LmYEH1olKhn

Phil · June 22

It affects mobile display, but if you would like adjust it more, use the following CSS code:

@media only screen and (max-width:767px){
 .woocommerce .products .product .image_frame img,
 .shop_slider_ul .image_frame img{
   transform: scale(1.35)!important;
 }
}

Best regards

Spacing between products

Comments