3

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

2
  • Clear cache and check again. Jul 29, 2016 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, 2016 at 6:28

3 Answers 3

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;
1
  • Hi, I've already put that code into the _theme.less file and its had no effect
    – Ben
    Feb 15, 2016 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 and acknowledge you have read our privacy policy.

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