2

I'm having trouble changing the max-width of a theme in Magento 2.

I've found the CSS in:

<THEME>/web/css/source/_layout.less

max-width: @layout__max-width;

Then in the Magento Lib folder there is documentation for the variable:

@layout__max-width              
Default: 1280px
Allowed Values: '' | false | value
Comment: Page maximum width

So i tried adding a new definition to my _layout.less file

@layout__max-width:1185px;

Also tried adding the same definition to _theme.less file

But i'm still getting max-width of 1280px

Any ideas what i've done wrong would be greatly appreciated

Thanks

  • Clear cache and check again. – Suresh Chikani Jul 29 '16 at 10:07
  • Can you please let me know the right way of modifying the less vraible, I have tried @TiEul answer but that is not working – mjdevloper Dec 19 '16 at 6:28
2

Looks like you put the file in the wrong directory, the correct location is:

app/design/frontend/<Vendor>/<Theme>/web/css/source/lib/variables/_layout.less

I just tried your example locally and it worked fine when I put it in the correct place.

1

You can write this code in _theme.less

@layout__max-width:1185px;
  • Hi, I've already put that code into the _theme.less file and its had no effect – Ben Feb 15 '16 at 20:02
0

Directly copy and past _layout.less file from lib directory to theme directory is not best practice.

You can Extend your _layout.less file

In your theme directory, create a web/css/source/lib/variables/ sub-directory.

Add _layout_extend.less and _extend.less file to web/css/source dierectory.

In web/css/source/lib/variables/_layout_extend.less file add your code for the layout variable override. like @layout__max-width:1185px; In web/css/source/_extend.less register the _layout_extend.less by adding the following code: @import 'lib/variables/_layout_extend.less';

With this you will extend the magento default styles not override.

For more information please see the Magento documentation. thanks. https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-guide/css_quick_guide_approach.html

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.