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 trialVictor Reynaga
5,054 PointsMy 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
5,517 PointsI 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
10,338 PointsOh 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
6,814 PointsThis 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
2,977 PointsThis 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
5,517 PointsFrom 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
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
10,338 PointsI've tried the max-width and find it changes color but obviously not as we would like.....this is strange?
Octavian Runceanu
6,143 PointsAny update?