CODEWITHSUNDEEP
htmlcss
Paulo Paiva
Paulo Paiva

Reputation: 57

Media queries issue - CSS

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.

@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;
}

}

Upvotes: 0

Views: 43

Answers (1)

Damien Puaud
Damien Puaud

Reputation: 302

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 */
  }
}

Upvotes: 1

Related Questions