UI Issue while zoom in

Issue: The header of the website is set as fixed. If the cart contains more items, the length of min-cart will have a height we provided.

As the header is fixed at the top while scrolling, the ‘view cart’ button on the mini cart will be hidden.

Solution: Provided a fixed height while zoom in the cart. The style is added to the initialize function of the header view

// mini-cart height setup while zoom in
                            window.addEventListener('resize', () => {
                                // Log browser zoom level (for debugging)
                                var browserZoomLevel = (window.devicePixelRatio * 100);
                                console.log('Browser Zoom Level:', browserZoomLevel);
                              
                              
                                var headerMiniCartContainers = document.querySelectorAll('.header-mini-cart-container');
                                headerMiniCartContainers.forEach(container => {
                                    if (browserZoomLevel > 110) {
                                        container.style.setProperty('max-height', '120px', 'important');
                                    } else {
                                        container.style.setProperty('max-height', '440px', 'important');
                                    }
                                });
                             });

Leave a comment

Your email address will not be published. Required fields are marked *