CODEWITHSUNDEEP
cssreactjssassmedia-queries
d3tr1tus
d3tr1tus

Reputation: 789

React scss Media query not translate max-width

I have a problem with SCSS media query in React.

I am using scss loader

        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }

and in _menu.scss I have

.menu-button {
position: fixed;
right: 2em;
top: 2em;
z-index: 999;
width: 4em;
height: 3em;
background-color: inherit;
border: none;
cursor: pointer;

@media all and (min-width: 728px) {
  background-color: #000000;
}

after that I am calling this in base.scss

but min-width is working all the time and it doesn't metter which width the device has and max-width is not working at all.

Can someone help me, please? What am I doing wrong?

RESULT: There should be max-device-width or min-device-width :)

Upvotes: 0

Views: 1047

Answers (1)

Lazar Nikolic
Lazar Nikolic

Reputation: 4394

As far as I can see, based on your code, your media query is not functioning because you did not specify inside your media query which element should have background-color: #000000

If you want to have different background color of your body for screen size bellow 480px (for example) you should do something like this:

@media all and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

Upvotes: 0

Related Questions