1

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.

2
  • 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

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.