Media Query Not Working

The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added

Solution 1:

I've been using $sm, $md, $lg, $xl as SASS variables to represent different sizes.

$sm = 600; // @media screen queries don't compile correctly$sm = 600px; // @media screen queries work as expected

Hopefully this helps someone

Solution 2:

i found this on a blog http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

profile-pic {
  float: left;
  width: 250px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}
@media screen and (min-width: 1200px) {
  .profile-pic {
    float: right;
  }
}

Share