-1

So im just testing some media queries for scss in my webpack project. I've just got a simple div within the body, and want the background to change depending on the width of the screen.

My two smallest media queries, small & xsmall, just don't apply, and I can't figure out why.

No matter how narrow I make the screen, the background stays green below 900px

$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  .test-class {
    width: 100%;
    height: 100%;
    @media (min-width: $xsmall) {    <--- Doesn't Apply
      background-color: purple;   
    }
    @media (min-width: $small) {     <--- Doesn't Apply
      background-color: pink;
    }
    @media (min-width: $medium) {
      background-color: green;
    }
    @media (min-width: $large) {
      background-color: yellow;
    }
    @media (min-width: $xlarge) {
      background-color: blue;
    }
    @media (min-width: $xxlarge) {
      background-color: orange;
    }
  }
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
DMDEV
  • 25
  • 4
  • 1
    the code seems to work fine. maybe there's a problem with your compiler ? – Rainbow Jul 20 '22 at 11:02
  • just using a webpack app. looking through the compiled css file. it all looks good. so weird – DMDEV Jul 20 '22 at 11:08
  • then maybe you're not triggering it, or a cache issue ? – Rainbow Jul 20 '22 at 11:11
  • Its showing fine in Dev tools on chrome & edge. even when my width in responsive is 454px for example. both the 600px and 300px options both have lines through them and the 900px width is being used. Cleared Cache and no difference made. – DMDEV Jul 20 '22 at 11:15
  • Found it. Was using a generic html template from a webpack task. added To the header and it sorted it – DMDEV Jul 20 '22 at 11:19

1 Answers1

0

Sorted it.

Was using a generic HTML boilerplate and not the full one provided by VSCode.

Added:

<meta name="viewport" content="width=device-width, initial-scale=1">

to the header and that resolved it.

DMDEV
  • 25
  • 4