You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Unstable Layout and Mobile Breakage with Over 10 Gallery Images
** Issue Description**
In the product view page, when the gallery contains more than 10 images in an array, the UI of the page breaks. Specifically, the width of the section automatically increases, causing the entire page layout to break. Additionally, on mobile devices, the layout completely collapses when more than 8 or 10 images are added to the product view page gallery.
Solution
Implement a scrollable feature for the gallery to prevent the automatic width increase and layout breakage. Referencing the react-image-gallery package as an example, aim for a responsive and stable gallery layout that can handle a larger number of images without compromising the overall page structure.
Not a perfect solution but my approach was to add a flex-wrap to this element. For a store, I'd rather have all variants visual in case the user doesn't know to scroll. However, that does introduce the potential for widow elements at certain widths.
Unstable Layout and Mobile Breakage with Over 10 Gallery Images
** Issue Description**
In the product view page, when the gallery contains more than 10 images in an array, the UI of the page breaks. Specifically, the width of the section automatically increases, causing the entire page layout to break. Additionally, on mobile devices, the layout completely collapses when more than 8 or 10 images are added to the product view page gallery.
Solution
Implement a scrollable feature for the gallery to prevent the automatic width increase and layout breakage. Referencing the react-image-gallery package as an example, aim for a responsive and stable gallery layout that can handle a larger number of images without compromising the overall page structure.
Reference:
react-image-gallery - Example version for a stable and responsive gallery.
Tailwind CSS example :--- https://tailwindui.com/components/ecommerce/components/product-overviews
The text was updated successfully, but these errors were encountered: