Media queries issue - CSS

Question

i'm new to html and css and i've been having a few issues dealing with media queries. Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.

Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution

Can anybody help me with this please? Appreciate it.

This is how it looks on windowed mode, with none of my changes written in the CSS applied

This is how it looks on fullscreen, now, its actually doing what it's supposed to do

@media screen and (height:1024px) {
.white_round_background{
 margin-left: 320px;
 height: 170vh;
 width: 160vw;
 background-color: rgb(197, 183, 183);
 }

.menunav {
left: 38%;
top: 4%;
}

.system_selection {
 margin: 420px 0 0 0px;
 height: 95px;
 }

#logo_sliding_menu {
margin-top: 710px;
}

}

Answer 1

Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.

You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:

@media only screen and (max-heigth: 600px) {} 

and only then

@media only screen and (max-width: 500px){}

ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...

.yourClass {
 /* CSS applied to all devices above 1024px height */
}
@media only screen and (max-width: 1024px){
  .yourClass {
     /* CSS applied to all devices smaller than 1024px height */
  }
}
@media only screen and (max-width: 955px){
  .yourClass {
     /* CSS applied to all devices smaller than 955px height */
  }
}
@media only screen and (max-width: 500px){
  .yourClass {
     /* CSS applied to all devices smaller than 500px height */
  }
}
/* And so on */

You can also play with min-height and max-height in the same query:

@media screen and (min-height: 400px) and (max-height: 900px)
{
  .yourClass {
    /* CSS applied to all devices 
    no less than 400px height and no more than 900px height */
  }
}