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.
Try adding the only screen
@media(only screen and max-width:768px){
.container{
background-color: green;
}
}