Does anyone know an efficent way to determine which less file or css file is responsible for a certain element in my magento shop? Sometimes it gets really frustrating if you want to change simple things like a background color or a margin.

Right now I want to move my main column up by 84 px. So I added this to my custom CSS file inside my theme:

.page-layout-2columns-left .column.main {
    margin-top: -84px;

But that does not affect anything. I tried many different other versions of that but it just won't work. Everything else inside my custom CSS file works like a charm. Any suggestions?

  • Use add custom less file instead of custom css it is easy to write less to modify the content. If your familiar with css but not in css you can use online conversion website like Eg: css2less.net .page-layout-2columns-left { .column.main { margin-top: -84px; } }
    – karthick
    Nov 29, 2016 at 6:22

2 Answers 2


You can see which files needs to be edited by setting up source maps within the browser dev tools. Before that you should setup grunt which will also compile the .less files.

I suggest you check out best practices for M2 answered here.


The best way in my opinion are:

  • Use an IDE with support for LESS to CLICK + ALT on the variable find out the location.
  • Consulting the Magento UI Library below.


  • Set the developer mode and use this method on the DevDocs to debug LESS:


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.