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.

Hi Kate,

Thank you for your reply.

I’d like to clarify my issue a bit more:
On desktop view, I need the left thumbnails gallery to always have the same height as the main product image.

Right now, when I resize the browser window, the main image height decreases as it adapts to the screen width,
but the left thumbnails area keeps its fixed height, so they become misaligned.

Could you please help me with a CSS solution that keeps the thumbnails gallery height responsive and always matches the main image height on desktop?

Thank you so much for your time and support!

Best regards,

Hi,

Do you want your gallery to work like in this video? https://take.ms/9MJ3d

Thank you for your reply.

Hi.
Sorry for the delayed reply.
Yes! How do you make it? What shows in the video is exactly what I want!
Could you help me to reach this? I’ll really appreciate it!

Hello,

1. You need to delete the following Custom CSS https://take.ms/1k749
2. In the element Product gallery option Thumbnails gallery height should be empty https://take.ms/KrF96
3. Select the option in Theme Settings if it is there https://take.ms/KQEumk

Kind Regards

[Author]

Posts