How to make the left gallery thumbnails responsive like the main image?
-
Hi there,
I’d like to ask for help with the product gallery layout. On desktop view, everything looks fine, but when I resize the browser window, the left gallery thumbnails don’t resize responsively — they become misaligned with the main product image.
Could you please let me know how to make the left thumbnail gallery responsive so that it keeps the same proportional height as the main image area on different screen widths?
Thank you so much for your help!
Best regards,
Hi reneersloan,
Thanks for reaching to us and appreciate your patience.
Please confirm me back if you resolved the issue. https://ibb.co/6cYsjHVk
Best Regards,
Hung PD
Hi Hung,
Thanks for getting back to me. I saw your reply, but the link you shared just shows a mobile screenshot of my product page. Could you please clarify what you meant by that?
The issue I mentioned still occurs when resizing the browser window — the left thumbnail gallery doesn’t stay aligned responsively with the main product image on smaller desktop widths.
Best regards,
Hi reneersloan,
Thanks for your patience.
I kindly recommend you to test on real mobile devices as well. Resizing functionality actually works on PC / Laptops only.
Best Regards,
Hung PD
Hi Hung,
Thanks for your reply! Just to clarify — the issue I mentioned isn’t related to mobile view.
It occurs on desktop, when resizing the browser window (for example, changing from full width to half-screen).
On smaller desktop widths, the left gallery thumbnails become misaligned with the main product image — they no longer keep the same proportional height.
Could you please take another look at this specific behavior on desktop resizing?
Hello,
Sorry for the delay.
Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Desktop section
.elementor-element .woocommerce-product-gallery.thumbs-position-left {
--wd-thumbs-width: 11%;
--wd-thumbs-height: 40vh;
}
Regards.
.
