WooCommerce Product Gallery Thumbnail Sizing Issue in Chrome on Widescreen
Summary:
The WooCommerce Product Gallery block displays incorrectly in the Chrome browser on desktop widescreen resolutions. The thumbnail images appear significantly larger than intended, almost matching the size of the main product image. This breaks the expected visual hierarchy where thumbnails should be distinctly smaller.
The issue is browser-specific, as the gallery renders correctly in Safari. The problem resolves itself when the browser viewport is manually resized down to a mobile breakpoint, at which point the layout adjusts and the thumbnails display at the correct, smaller size. This indicates a problem with the CSS or layout logic applied specifically to widescreen views in Chrome.
The impact is a poor user experience on a critical page, potentially affecting customer perception and conversion rates for stores using the latest Product Gallery block.
How to Replicate:
- Using the Chrome browser on a desktop computer, navigate to a product page with the new Product Gallery block (e.g., the provided URL: https://handnfable.com/product/gymnast/).
- Ensure the browser window is at a standard widescreen resolution.
- Observe that the thumbnail images in the gallery are incorrectly sized, appearing too large.
- To confirm the responsive behavior, slowly shrink the browser window's width. The thumbnails will eventually wrap and display correctly once a mobile breakpoint is reached.