How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px)

Question

I want to make responsive page using react JS. I have some problems making it. I don't really know how media query CSS works, but for @media(max-width:1024) and @media(max-width:768px) sizes it works as I expected. I guess for size @media (max-width:425px) will also work as where @media(max-width:768px) works. But apparently starting from @media(max-width:425px) it follows the previous breakpoint( @media(max-width:768px) ) and @media(max-width:375px) following the @media(max-width:425px) style. At breakpoint 320px back to my expectations.

This is my html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        This is content
    </div>
</body>

</html>

And this is my CSS code:

.container{
    background-color: red;
    height: 100vh;
}

@media(max-width:1024px){
    .container{
        background-color: yellow;
    }
}
@media(max-width:768px){
    .container{
        background-color: green;
    }
}
@media(max-width:425px){
    .container{
        background-color: blue;
    }
}
@media(max-width:375px){
    .container{
        background-color: rosybrown;
    }
}
@media(max-width:320px){
    .container{
        background-color: rosybrown;
    }
}

Is there a way for each breakpoint to take its own style. As in max-width:1024px which takes a yellow background and max-width:768px takes a green background. Is it possible if I want if at max-width:425px it takes a blue background and at max-width:375 it takes a rosybrown color. Thank you in advance.

Answer 1

Try adding the only screen

 @media(only screen and max-width:768px){.container{ background-color: green; } }

How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px)

Question

1 answers

solution1
0 2021-11-27 12:09:10

How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px)

Question

1 answers

solution1 0 2021-11-27 12:09:10

solution1
0 2021-11-27 12:09:10