找不到导致产品页面太宽的原因（Shopify）

Question

我需要一些帮助来弄清楚是什么导致该网站上的产品页面 (https://bandasy.com/collections/bundles/products/quore-shorts-quore-crop-top-set) 太宽。

我在 CSS 中对产品库进行了一些自定义，使其成为全宽，并在下面的产品信息中添加了填充。现在在移动设备上，您可以向右拖动，有些东西太宽了，但我不知道是什么原因造成的。任何有关如何解决此问题的帮助将不胜感激。

谢谢！

我添加的CSS：

@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;
  }
}

Answer 1

有几个问题会导致页面比视口更宽

1. 包裹主图像的 div 中的负边距。为元素提供零边距会将其带入视口内。下面是相关div的选择器供您识别

   #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

2. 100% 宽度 + 用于包装评论列表的 div 的左右边距。当您为 div 提供 100% 宽度时，它已经占据了整个宽度（假设父级已经是全屏宽度，就是这种情况），然后在两侧添加边距会将其延伸到屏幕宽度之外。您可以在此处减小宽度，也可以使用填充（使用

   box-sizing: border-box

   ）代替边距。下面是相关div的选择器

   #AirReviews-BlockWrapper > div > div > div.AirReviews-Blocks__List