CODEWITHSUNDEEP
htmlcssmedia-queries
Filip5
Filip5

Reputation: 67

CSS Media queries not responding

I know this question appeared here a few times, but I didn't find the answer I am looking for in them.

Basically I created web for 800x600 resolution, as I want to adjust web for different resolutions on desktop from this point. Before I go on, I want to ask, which is the best option, to use % or px for defining elements ?

So let's say I got web which I want to adjust to different resolutions. There is about 12 available of them for desktop. If I want that web to look properly on each, I should code it for each,right ? What is the best way to target screen resolution ? 800x600 works well, 1024x600 works too. However 1024x768, for some reason is not being targeted. Here I ll post the code:

.scene {
  padding: 0;
  margin: 0;
}

.fill {
  position: absolute;
  bottom: 0%;
  right: -1%;
  left: -2%;
  top: -10%;
}

.expand-width {
  width: 101%;
}

@media only screen and (min-width: 1024px) and (max-height: 600px){}

@media only screen and (min-width: 1024px) and (min-height: 601px){

    body{background-color: red;}

        .fill {
  position: absolute;
  bottom: 0%;
  right: -1%;
  left: -2%;
  top: -10%;
}

    .expand-width {
  width: 101%;
}
    }

Upvotes: 1

Views: 105

Answers (1)

neophyte
neophyte

Reputation: 6626

Firstly you are using media queries so % or px is not an issue as media queries is ther for resolving that issue only. but for true responsive ness you can go for %.

Next you are designing for 1024*600, so 1024*768 is included in it that's why ir is not effecting the code.

Try !important for 1024*768 resolution styles.

Upvotes: 1

Related Questions