I need to increase the width of search box in home page.

With the help of developer tools i have found that block-search (.block-search) class is reason for this and i have checked .block-search in my magento2 directory.

And i have found .block-search class in \pub\static\frontend\Magento\luma\en_US\css\styles-l.css for which i have changed the size and its working fine.

Now in the future to get updates for any css classes i may delete pub/static files. So how to find the core files reason for any css, so that even i delete pub/static files it won't get effected to my changes requirement


Most of css in Magento generated form less files. Css for stiles-l.css is generated base on app/design/frontend/Magento/blank/web/css/styles-l.less file.

See: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html for details

  • looked on .search in app/design/frontend/Magento/blank/web/css but not found. – prasad maganti Mar 16 '16 at 13:40
  • see: app/design/frontend/Magento/blank/Magento_CatalogSearch/web/css/source/_module.less file – KAndy Mar 17 '16 at 6:22

You will find that class in styles-l.less. If your build on top of the blank theme you can create a _theme.less file in your theme to apply this kind of styling change.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.