shopify - 如何在shopify上增加搜索框的宽度

Question

我正在尝试增加 Shopify 木材框架中搜索框的宽度，但遇到了问题。可以增加填充，但输入字段的大小保持不变。任何建议将不胜感激。谢谢！

Answer 1

快速的答案是.site-header__search在timber.scss.liquid（在资产文件夹中找到）中找到并删除该行max-width: 400px。这将使搜索框占据其父宽度的 100%。

如果您想进一步调整它，您可以调整标题中的网格项目大小。请参见下图并注意grid__itemdiv：

在那里你会看到large--one-half large--text-right medium-down--hide。large--one-half是什么决定了大断点上的容器大小。将其更改为类似的东西large--two-thirds，它会变得更宽 - 尽管一定要在它之前将 div 调整为large--one-third，否则您的搜索grid__item将堆叠在您的商店名称/徽标下方。

查看完整的 Timber 文档以更好地了解网格。