移动端Squarespace媒体查询实现图片横向排列及缩小问题求助

你之前的操作误区在于给单个图片容器（.list-item-media）设置布局属性，而非修改它们的父容器结构。Squarespace的列表类模块（如Gallery List、Summary Block）默认会将.list-item设为块级元素，自然纵向堆叠，因此需要先调整父容器的布局规则，再优化图片尺寸。

可行的媒体查询代码 #

将以下代码替换你原有的手机端媒体查询部分，添加到自定义CSS中：

@media only screen and (max-width: 640px) {
  /* 给列表父容器设置flex布局，实现横向排列 */
  .list-items {
    display: flex;
    overflow-x: auto; /* 图片过多时允许横向滚动，避免溢出屏幕 */
    gap: 1rem; /* 图片间的间距，可按需调整 */
    padding-bottom: 1rem; /* 给横向滚动条预留空间 */
  }

  /* 固定列表项尺寸，防止被拉伸/压缩 */
  .list-item {
    flex: 0 0 auto;
    width: 150px; /* 自定义图片容器宽度，控制显示尺寸 */
  }

  /* 调整图片容器及图片的适配规则 */
  .list-item-media {
    width: 100%;
    height: auto;
    filter: grayscale(0)!important;
  }

  /* 保留你原有的内容样式设置 */
  .list-item-content {
    opacity: 1!important;
    margin-top: -60%;
  }
}

关键细节说明 #

• .list-items：这是Squarespace列表模块的默认父容器类，设置display: flex直接改变子元素的排列方向，overflow-x: auto保证小屏场景下的可用性。
• .list-item：flex: 0 0 auto强制列表项保持固定尺寸，通过width参数可以直接控制单张图片的显示大小。
• .list-item-media：width:100%让图片填满容器，height:auto维持图片比例，避免变形。

如果你的列表模块使用了非默认类名，可以通过浏览器开发者工具（F12）定位父容器的实际类名，替换代码中的.list-items即可。

内容的提问来源于stack exchange，提问作者Marius VK