Hello! Help, please, with advice: I try using media queries to adjust the width of the header and content, but it does not 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 that the header and content occupy 53%, the rest, respectively, the fields. Prescribed, like, 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 - the rules do not work, fields still appear and content with a header occupies 53%, which results in a thin strip (. What am I doing wrong? Maybe media queries should not be recorded in the style file? How else can you realize the idea? I tried also max-device-width, it still does not work.

  • move requests down - soledar10
  • Thank you very much! Everything worked, could not even think that it was because of the order) - Regina

2 answers 2

It is necessary to put the media after the usual, so that they override the standard rules:

 #main { width: 53%; } @media screen and (max-width: 1024px) { #main { width: 100%; } }

One could check the size

 @media screen and (max-width: 1024px) { #main { width: 100%; } } @media screen and (min-width: 1025px) { #main { width: 100%; } }

But this method only works correctly with pixels, if there are other units of measurement, then intermediate states are possible, in which, depending on the implementation, neither one unit will apply or both will be applied. Therefore, in my opinion, it is better to do it immediately with the redefinition.

    Since you have a common part, it is always after the request, it always fulfills, and it "grinds" the conditions. It is necessary either to change the order (as already written) or to make the condition not for "everything else" (the analogue of else ):

     @media screen and (max-width: 1024px) { ... } @media not screen and (max-width: 1024px) { ... }
    • Are you sure about the screen? Something is doubtful that it works as required on the issue. - Qwertiy ♦
    • @Qwertiy seems to work like jsfiddle.net/u4xzw65a/2 - Petr Abdulin
    • It seems that when printing does not work. I can not understand - the browser is tricking something with switching ... - Qwertiy ♦
    • @Qwertiy and if instead of screen all to put? - Petr Abdulin
    • It looks like yes. - Qwertiy ♦