Images on Shopping page

[fabipaolini]

Hi guys!
having trouble with the way that the images look on the mobile version of this page: https://naturalsnuggles.com/shop/
You see how the images stack up?
Can you help with fixing this?
Thanks!

[christopher]

Hi there,

The new version of Woocommerce has the gallery of the images in the single product page so dense and I also don’t like that view.

I suggest that you add the CSS code below to Pro > Launch > Theme Options > CSS:

.single-product .flex-control-nav.flex-control-thumbs {
    float: none;
    position: relative;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 60px;
}

.flex-control-nav.flex-control-thumbs li {
margin: 10px;
}

.woocommerce-product-gallery__trigger img {
    visibility: hidden;
}

.woocommerce-product-gallery__trigger:before {
    font-family: "FontAwesome";
    content: "\f065";
    color: white;
}

Not related to this question, but I strongly suggest that you back up your website completely and update the theme to version 2.0.2. The reason is that you are using version 3.3 of the Woocommerce plugin which the currently installed version of the theme on your website does not support.

If you want to add the CSS code mentioned after you updated the theme, the path to add the CSS will be Pro > Theme Options > CSS.

Thank you.