Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 14, 2023 at 3:18 pm #1404458
    El

    Hi there,

    great that you added touch slide of product images to the latest enfold version. I would like to display all product images in one bar under the main image on mobile devices no matter how may there are. How can this be done?

    Best,
    El

    April 17, 2023 at 2:32 pm #1404695
    Yigit

    Hey El,

    Would you like to display thumbnails in 1 column? If so, please add the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling

    
@media only screen and (max-width: 480px) { 
#top.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  width: 100% !important;
}
}

    Your WooCommerce thumbnail size is currently 100x100px so displaying them in a single column would make them look blurry. Please install the Simple Image Size plugin https://wordpress.org/plugins/simple-image-sizes/, go to Settings > Media, increase “woocommerce_thumbnail” image sizes, and regenerate thumbnails.

    If this isn’t what you meant, please share more details on the changes you’d like to make.

    Best regards,
    Yigit

    April 17, 2023 at 2:43 pm #1404696
    El

    Hey Yigit,

    the other way around. All thumbnails in the same ONE line under the main image. It makes sense now that one can swipe the main image.

    Best.
    Elmar

    April 17, 2023 at 2:55 pm #1404697
    Yigit

    Hi Elmar,

    Please use the following code instead

    
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.