Edit CSS/LESS problems

Question

so I would like to change this css

 .navigation,
 .breadcrumbs,
 .page-header .header.panel,
 .header.content,
 .footer.content,
 .page-wrapper > .widget,
 .page-wrapper > .page-bottom,
 .block.category.event,
 .top-container,
 .page-main {
 box-sizing: border-box;
 margin-left: auto;
 margin-right: auto;
 max-width: 1280px;
 padding-left: 20px;
 padding-right: 20px;
 width: auto;
 }

so it does not appy to .page-main

 .navigation,
 .breadcrumbs,
 .page-header .header.panel,
 .header.content,
 .footer.content,
 .page-wrapper > .widget,
 .page-wrapper > .page-bottom,
 .block.category.event,
 .top-container{
 box-sizing: border-box;
 margin-left: auto;
 margin-right: auto;
 max-width: 1280px;
 padding-left: 20px;
 padding-right: 20px;
 width: auto;
 }

i get that I can change the variables for example @layout__max-width with my _theme.less but where does it say for which classes those styles apply?

Also I still refuse to believe that this is really the best way to customize my css. Do I really have to search 20 minutes trough all those .less files just to find some variable so i can override it with my _theme.less file.

Answer 1

• To discover easier you can set the developer mode and use this method on the DevDocs to debug LESS:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

• Use an IDE (e.g. PHPStorm) with support for LESS to CLICK + ALT on the variable to find out the location.

• You can use to check the variables and patterns on the Magento UI library here:

https://magebr.github.io/Magento-2-UI-library/index.html