Can't find what's making the product page too wide (Shopify)

I need some help figuring out what's making the product page on this website (https://bandasy.com/collections/bundles/products/quore-shorts-quore-crop-top-set) too wide. gap I customised the product gallery a bit in CSS to make it full width, and added padding to the product info below. Now on mobile you can drag to the right, something is too wide, but I can't figure out what's causing it. Any help on how to solve this would be greatly appreciated. Thanks! CSS I added: @media screen and (max-width: 768px) { .t4s-col-item { padding-right: calc(var(--ts-gutter-x) * 0) !important; padding-left: calc(var(--ts-gutter-x) * 0) !important; } .t4s-product__info-container { padding-right: 8% !important; padding-left: 8% !important; } }

There are couple of issues that makes your page wider than the viewport Negative margins in the div that you have wrapped the main image. Giving a zero margin for the element will bring it inside the viewport. Below is the selector of the concerned div for you to identify #shopify-section-template--19329150189906__main > div.t4s-container.t4s-main-product__content.is--layout_wide.t4s-product-media__thumbnails_left.t4s-product-thumb-size__large > div > div > div 100% width + left and right margin on the div that you have used to wrap your review list. When you give 100% width to the div it already occupies the full width (assuming the parent is already full screen wide which is the case here), then adding margins either side will then extend it beyond screen width. Either you can reduce your width here, or you can use padding (with box-sizing: border-box) instead of margin. Below is the selector of the concerned div #AirReviews-BlockWrapper > div > div > div.AirReviews-Blocks__List

January 27, 2024