如何增加shopify搜索框的宽度(how to increase the width of search box on shopify)

如何增加shopify搜索框的宽度(how to increase the width of search box on shopify)

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

I'm trying to increase the width of the searchbox in Shopify timber framework but having problems. The padding can be increased, but the input field stays the same size. Any suggestions will be greatly appreciated. Thanks!

最满意答案

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

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

在那里你会看到large--one-half large--text-right medium-down--hide 。 large--one-half是决定你的大断点容器的大小。 把它grid__item large--one-third - 它会变得更宽 - 虽然也要把div调整到large--one-third ，否则你的搜索grid__item将叠加在你的商店名称/标志下面。

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

The quick answer is to find .site-header__search in timber.scss.liquid (found in the assets folder) and remove the line max-width: 400px. This will let the search box take up 100% of it's parent width.

If you want to adjust it further than that, you can adjust the grid item sizes in the header. See the image below and notice the grid__item divs:

There you'll see large--one-half large--text-right medium-down--hide. large--one-half is what dictates the container size on your large breakpoint. Change that to something like large--two-thirds and it'll get wider — though be sure to also adjust the div right before it to large--one-third, otherwise your search grid__item will stack below your shop name/logo.

See the full Timber docs to get a better understanding of the grid as well.