css - 修复变体选择包装宽度 (SqSp)

Question

在我的个人产品页面上，有下拉选择框显示我的产品的变体。因为一些变体有更长的描述，所以这个框变得更长。在桌面网站上没问题，但在移动设备上，选择栏会超出页面边缘。这似乎干扰了我在页面顶部的移动菜单。

据我所知，我应该定位“variant-select-wrapper”，但我环顾四周似乎无法找到缩短此框以使其适合移动显示器的方法。

有谁知道有效缩短或固定此框宽度的方法，还是我定位错误？谢谢

Answer 1

以下 CSS 应该适合您，已添加到 Squarespace 中的 CSS 编辑器(如果您使用开发模式，则添加到您的 CSS 文件)。

.variant-option select {
  max-width: 100%;
}

这将限制选择框本身的宽度，使其不会超出其父项的宽度。这不会影响选择框内选项的宽度，在 Windows 设备上，选择框将继续扩展到父项(以及与此相关的浏览器窗口)之外。但是，在 Android 和 iOS 上，选项将出现在类似模态的框中，文本选项被包裹起来。我认为这在这两种情况下都是可以接受的用户体验。

要在 Windows 设备上包装选项，需要 Javascript(Ref. 1、Ref. 2)，这就是为什么我认为这种简单的 CSS 方法是一种合理的折衷方案。