Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout CSS Media Queries Complex Media Queries

Posted by Victor Reynaga
Victor Reynaga
5,054 Points

My background is green at all times...its not changing depending on the size or portrait orientation.

@media screen and (min-width: 900px), (orientation: portrait) { section { background-color: green; } }

my background color is just set to green the entire time...not being affected by the 900px or portrait.

6 Answers

Cody Hansen
Cody Hansen
5,517 Points

I think I see the issue! This code is what is setting the background color, right?

@media screen and (min-width: 900px), (orientation: portrait) { 
  article { 
    background-color: green; 
  } 
}

Unfortunately, there is nothing else controlling the article tag's background color which means, once that code is true, there is no other css to change it back, permanently leaving it green.

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

Oh its based on the height of the veiwport so reduce your browser window height on your desktop and now try resizing the window from the side.

quote "If the width of the viewport is wider than the height, that's landscape orientation" still doesn't seem like something I'd play around with anytime soon :-)

Daniel Ruus
Daniel Ruus
6,814 Points
Daniel Ruus
Daniel Ruus
6,814 Points

This has to do with the proportion of the browser window. If you have a large browserwindow on a large screen, you will reach the width of 900px before entering the landscape mode so it will not trigger. Adjust the browser to be for something like 400px in height and then drag it from narrow to wide and you will se both conditions in the media query trigger.

Darby Ellis
Darby Ellis
2,977 Points

This solved my issue. I took my browser out of maximized viewing and dragged its height down and then played with the width. Voila!

Cody Hansen
Cody Hansen
5,517 Points
Cody Hansen
Cody Hansen
5,517 Points

From what I can tell, there are no issues with this code... but perhaps I'm missing something.

Maybe it has to do with how it works with the rest of the responsive CSS? Is it possible that no other CSS overrides it once it changes to the code you've provided?

Victor Reynaga
Victor Reynaga
5,054 Points

*{ box-sizing:border-box; }

header{ width:100%; position:fixed ; top:0; left:0; background-color: blue; color: ghostwhite; padding: 10px 15px; border: solid yellow 10px; font-size:30px; margin: 0 -8px 0px 0; } article{ margin-top: 5rem; }

interesting-banner{

position:sticky; top:0; font-size: 30px; border:solid red 10px; background-color: orange; padding: 5px; color: green; margin: 0 -8px; } figure{ position:relative; margin:0; } figcaption{ position:absolute; background-color: yellow; width:100%; bottom: 10px; text-align:center; }

aside img, figcaption { width: 100%; max-width: 600px; } .box-img{ float: left; margin: 0 1rem 1rem 0; } .padding{ clear:both; }

bio{

width: 600px; background-color: mistyrose;
margin-top:0; padding: 1rem; }

@media print { section{ min-height:auto; } }

@media screen and (min-width: 600px) and (max-width: 800px) { header{ color: red; } }

@media screen and (min-width: 900px), (orientation: portrait) { article { background-color: green; } }

this is all my css code....its weird becuse the media query for the 600px works as it should ...but the 900px does not.

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

I've tried the max-width and find it changes color but obviously not as we would like.....this is strange?