0

I'm working on a custom Magento 2 theme and I added couple of my own elements in it. When I write (for example):

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  .example_element{width:100px;}
}
.example_element{widht:200px;}

The code from media query is always overwritten by code below. I'm writing this code in my _theme.less file and it ends up in style-m.css. Yes I can use !important - but that is not the idea. I would like to know where do I need to write my responsive css / less code in order to work properly.

Thank you!

0

Try this

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
      .example_element{width:100px;}
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .example_element{widht:200px;}
}
0

This goes in style-m.css, that generates the common and mobile styles

& when (@media-common = true) {
   .example_element{
       width:100px;
   }
}

This goes in style-l.css, that generates the desktop styles (Up to 768px)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
          .example_element{
               width:200px;
           }
    }

The mobile first approach is better so mobile devices don't even load the desktop styles.

Here the doc

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.