如何增加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以更好地理解電網。