Media querries override

HTML-CSS
1

Hi,

I’m trying to make a media querry, very simple, wich change the max-width of a div.

It doesn’t work as I expect. I use SCSS.

the codepen : https://codepen.io/johnthecoder/pen/aeRYBQ?editors=1100

In the code below, the first selectors work but the second wich, for me, should be the same doesn’t.
May be I don’t have enough understanding of the selectors.

.home .home-container {
  background: red;
  max-width: 350px;
}
.home {
  &-container {
    background: red;
    max-width: 350px;
  }
}
2

I don’t think the parent selector you have is doing what you expect. You can always check the compiled CSS using the down arrow menu on the CSS box (View Compiled CSS)

This:

.home {
  &-container {
    background: red;
    max-width: 350px;
  }
}

Compiles to this:

.home-container {
  background: red;
  max-width: 350px;
}

I’m guessing what you want is this:

.home {
  & &-container {
    background: red;
    max-width: 350px;
  }
}