Media queries don't work
Hello! Please help me with some advice: I try to use media queries to adjust the width of the header and content, but it doesn't work. I need that if the device screen is less than 1024 px, the fields are not shown, and the header and content occupy 100% of the screen, on widescreen monitors, so that the header and content occupy 53%, the rest, respectively, the fields. Prescribed, it seems, correctly:
@media screen and (max-width: 1024px) {
#main {
width: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
}
#header {
background-image: url(../images/header.jpg);
width: 53%;
height: 239px;
background-repeat: no-repeat;
padding: 0px;
margin: auto;
border: 1px solid #CCC;
}
#main {
width: 53%;
min-height: 800px;
height: auto;
margin: auto;
background-color: #F5F5F5;
border: 1px solid #CCC;
overflow: auto;
font-family: serif;
}
Checked repeatedly on devices with a resolution of less than 1024 px-rules they don't work, the fields still appear, and the content with the header occupies 53%, which makes a thin strip (. What am I doing wrong? Maybe media queries don't need to be written to a style file? How else can you implement the idea? I also tried max-device-width, but it still doesn't work.
2 answers
It is necessary to put media after the usual ones, so that they override the standard rules:
#main {
width: 53%;
}
@media screen and (max-width: 1024px) {
#main {
width: 100%;
}
}
It would be possible to check the size of
@media screen and (max-width: 1024px) {
#main {
width: 100%;
}
}
@media screen and (min-width: 1025px) {
#main {
width: 100%;
}
}
But this method works correctly only with pixels, if there are other units of measurement, then there may be intermediate positions, in which, depending on the implementation, either neither block is applied, or both are applied. Therefore, in my opinion, it is better to immediately do with the redefinition.
Since you have a common part that is later than the request, it always works out, and "grinds" the conditions. You need to either change the order (as already written) or make the condition not for "everything else" (analogous to else):
@media screen and (max-width: 1024px) {
...
}
@media not screen and (max-width: 1024px) {
...
}