如何增加shopify搜索框的宽度

Question

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

Answer 1

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

如果你想进一步调整它，你可以在 header 中调整网格项目的大小。请参见下图并注意 grid__item divs:

在那里你会看到 large--one-half large--text-right medium-down--hide。 large--one-half 决定了大断点上的容器大小。将其更改为 large--two-thirds 之类的内容，它会变得更宽 — 但请务必也将其之前的 div 调整为 large--one-third，否则您的搜索 grid__item 将堆叠在下方你的店铺 name/logo.

请参阅 full Timber docs 以更好地了解网格。