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

Question

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

Answer 1

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

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

你会看到large--one-half large--text-right medium-down--hide。 large--one-half决定了大断点上的容器大小。将其更改为类似large--two-thirds的内容并且会更广泛 - 但请务必同时将div调整为large--one-third，否则您的搜索grid__item将堆叠在您的商店名称之下/标志。

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