Same LESS file, one media-width works, the other doesn't?

Question

I have a custom theme with the parent of blank. In web/css/source I have_navigation_extend.less.

At the top I have

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
.nav-sections {
    display: inline-block;
    padding-left: 20px;
  }
}

Which doesn't work for some unknown reason and is driving me nuts since the line below it works. It doesn't even show up in any of the CSS files. But the next line right below it does show up and works as expected:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  .nav-sections-item-title {
    background: darken(@navigation-mobile__background, 5%);
    border: solid darken(@navigation-mobile__background, 10%);
    border-width: 0 0 1px 1px;
  }
}

What am I missing?!?!!

Answer 1

There are a lot of things that may be happening. Are you using grunt? If so, are you sure it's running.

The first line is also min of screen__l so make sure you're viewport is wide enough.

I'd also suggest emptying the var/view_preprocessed folder, clear cache and refresh the browser.