Shopify产品页面移动端过宽问题排查求助

问题背景 #

修改产品画廊为全屏、给产品信息添加内边距后，移动端页面出现可向右拖动的过宽问题，无法定位具体溢出元素，添加的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; 
  } 
}

排查方法 #

1. 定位溢出元素：打开浏览器开发者工具（F12），切换到移动端视图，用「元素选择器」从页面右侧超出区域往左框选，找到对应的DOM元素；也可以给body临时添加overflow-x: hidden先抑制滚动，再逐一检查宽元素。
2. 检查关键属性：重点排查元素的width、min-width、padding、margin，尤其是设置了固定宽度、calc计算错误，或者子元素未继承父容器宽度限制的情况。

针对性修复建议 #

1. 临时抑制横向滚动（可选） #

先添加全局溢出隐藏，避免影响用户体验，再找根源：

@media screen and (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
  }
}

2. 修复产品画廊宽度 #

确保画廊容器及内部图片不超出视口：

@media screen and (max-width: 768px) {
  .t4s-col-item {
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100vw;
    overflow-x: hidden; /* 防止子元素溢出 */
  }
  .t4s-col-item img {
    max-width: 100%;
    height: auto;
  }
}

3. 检查产品信息容器内元素 #

确认.t4s-product__info-container内的文本、按钮、图片等元素没有设置固定宽度，添加自动换行：

@media screen and (max-width: 768px) {
  .t4s-product__info-container * {
    max-width: 100%;
    word-wrap: break-word;
  }
}

4. 排查隐藏元素 #

部分弹窗、导航组件可能默认隐藏但仍占据宽度，用开发者工具搜索min-width属性，筛选出值大于当前移动端视口宽度的元素，调整其宽度为100%或auto。

内容的提问来源于stack exchange，提问作者Lovro Kocbek