Hello! Please help advice: try using media requests to adjust the width of the caps and content, but does not go out. I need it so that if the device screen is less than 1024 px, the fields were not shown, and the hat and the content occupied 100% of the screen, on widescreen monitors so that the cap and the 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 – the rules do not work, there are still fields and content with a hat occupy 53%, which makes the thin strip (. What am I doing wrong? Maybe media requests are not in style file Need to record? How else can I follow? I also tried max-device-width, still not working.

Answer 1, Authority 100%

We need to put Media after normal 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

@ 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 intermediate standards are possible, in which, depending on the implementation, no block cannot be applicable or applied. Therefore, in my opinion, it is better to immediately do with override.

Answer 2, AUTHORITY 60%

Since you have a common part of the request later, it always works, and “shares” conditions. You need to either change the order (as already wrote) or make the condition not for “all the rest” (analogue ELSE ):

@ media screen and (max-width: 1024px) {
...
}
@Media Not Screen and (Max-Width: 1024px) {
...
}