Forums

Nick_S

I'm trying to create a page that does not scroll, and I'm using CSS media queries to make it fit various screen resolutions.
I want to make my page fit three screen resolutions such as:

1280 px by 960px
1280px by 768px
1280px by 720px
800px by 600px

However, when I make two or more media queries with the same width (1280px), only one of them works and not the other two.
How can I solve this? I've been very frustrated with this and I would greatly appreciate it if someone could help me out.

Here is my CSS code:

@media screen and (max-width: 1280px) and (max-height:1024px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:yellow; height:100px; width:350px; text-indent:100px;}
}

@media screen and (max-width: 1280px) and (max-height:720px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:pink; height:100px; width:350px; text-indent:100px; color:black;}
}

@media screen and (max-width: 1280px) and (max-height:960px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:green; height:100px; width:350px; text-indent:100px; color:yellow;}
}

@media screen and (max-width: 800px) and (max-height:600px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:blue; height:100px; width:350px; text-indent:100px; color:white;}
}

HTML code:

<html>
<head>
<title>Media queries test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 1440px) and (max-height:1024px)" href="mq.css">
</head>

<body>
<div id="change"><ul><li><p>This Box will change colour when you resize your browser window.</li></ul></p></div>
</body>
</html>

traq

which one "works"? green?

actually, they all work. Just not the way you expect.

-- "green" has the biggest height: so it will always match the other max-heights as well.
-- it's also last in the markup: so it will always have the highest precedence.

Senff

I guess what you need to do to make it work is swap the 2nd block and the 3rd one. Right now, if the screen is anything less than 720, if will apply the pink for sure, but then the green will always override it because it's also less than 960.

If the second block is "true", the third one is automatically always "true" as well.

So I would check if this is what you were after (comments only apply if width is between 800 and 1280 but I don't want to clutter it up too much):

/* if height is between 960 and 1024 */
@media screen and (max-width: 1280px) and (max-height:1024px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:yellow; height:100px; width:350px; text-indent:100px;}
}

/* if height is between 720 and 960 */
@media screen and (max-width: 1280px) and (max-height:960px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:green; height:100px; width:350px; text-indent:100px; color:yellow;}
}

/ if height is between 0 and 720 */
@media screen and (max-width: 1280px) and (max-height:720px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:pink; height:100px; width:350px; text-indent:100px; color:black;}
}

@media screen and (max-width: 800px) and (max-height:600px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:blue; height:100px; width:350px; text-indent:100px; color:white;}
}

treehouse : what would you like to learn today?

Forums

Media queries with identical width