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 Let's Practice Media Queries!

Posted by vladshevtsov
vladshevtsov
5,041 Points

Why does regardless of that rule the picture <img src="main.jpg" alt="books"> appear on the page?

I didn't understand one thing. In this first media query for tag "<img>" applied the rule: "display: none". Why does regardless of that rule the picture <img src="main.jpg" alt="books"> appear on the page? Whereas I have adjusted my browser less than 576px. I've talk about this piece of code:

/* Target viewport sizes less than 576px */

@ media (max-width: 576px) { header { text-align: center; margin-bottom: 2.5rem; } .logo { margin-bottom: 0; } nav a { padding: 6px 0; background: #def1f9; margin: .2em 0; } img { display: none; } }

1 Answer

YASH NAIR
YASH NAIR
3,463 Points
YASH NAIR
YASH NAIR
3,463 Points

by targetting viewport sizes less than 576px it means that your @media should have a max-width less than 576px so the only mistake you have done is put the max-width to 576px whereas it should be 575px :)

vladshevtsov
vladshevtsov
5,041 Points

ok, thanks!!!!

Hakim Rachidi
Hakim Rachidi
38,490 Points

The real problem is that he had left a space between '@' and media, so the browser will ignore the css block. Your answer is right but the max-width value is not the real problem:

Why does regardless of that rule the picture <img src="main.jpg" alt="books"> appear on the page? Whereas I have adjusted my browser less than 576px. I've talk about this piece of code ...

@vladshevtsov said that he adjusted the screen window to less than 576px.

To conclude here is the correct media query:

@media (max-width: 575px) {
    header { text-align: center; margin-bottom: 2.5rem; }  
    .logo { margin-bottom: 0; } 
    nav a { padding: 6px 0; background: #def1f9; margin: .2em 0; } 
    img { display: none; } 
}

Hope I could clarify some things ;)