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

Posted by mrx3
mrx3
8,742 Points

Having some trouble with my @media queries.

I just finished up Nick's lesson on media queries, and thought I would give it a try. I made a practice site about a few of my favorite pro wrestlers growing up...yes I'm a old school wrestling fan :D My code pen is below, my CSS starts at line 1 and ends online 228, my @media query starts on line 234-246. The problem I'm having is this, I set my @media query up just like Nick. I want the background to be white at a min-width: 480px for a tablet. Now if the user is on a lap-top or larger screen I want the background color to turn back to the original declared in my CSS which is on line 111, the background color is #D3D3D3; it's a light grey color. Now if you adjust the browser widow to a larger size the background color just stays white the whole way, and I want the color to change back to the #D3D3D3; color. Can someone please explain to me why the background isn't changing back to grey when the browser is staying white the whole time, and not changing? I completely lost here and any help would be greatly appreciated. Code pen: http://codepen.io/mike316/pen/sELjq

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

Yes, you have a simple error. Your very first media query for 480 px is overriding everything else.

This

@media screen and (min-width: 480px) {
  .main-content {
    background: white;
  }

}

Is what is keeping the background white at any size. It's overriding the grey background. It's doing this because it's at the bottom of the stylesheet, so it therefor will override any styles above it. And because you did not declare a max width value, this rule will be applied anytime the screen is anysize that is larger than 480px.

If you give that media query a max-width, it'll turn it back off at somepoint. You just need to decide what that value is, but you'll want a media query something like

@media screen and (min-width: 480px) and (max-width: 756px) {
  .main-content {
    background: white;
  }

}
mrx3
mrx3
8,742 Points

Kevin you're the best man, I really appreciate everything you do to help me. I can't count how many times I've almost said," I tap." And want to quit. But it's people like you and everyone else on this board that help, and make me stay in this for the long haul. Thanks a million man!!!

Kevin Korte
Kevin Korte
28,149 Points

No problem bud. We've all been there. We're just trying to give back since we needed the help before too.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

You have to add this to your second media query: 

.main-content {
    background: #D3D3D3;
  }

As it stands right now you have the min-width of 480px set to white. This means that anything over that size will have a white background. In order to over-ride this you need to change it back in another min-width media query.

mrx3
mrx3
8,742 Points

I seem to be getting these backwards, Thank you Chris for your help. I really appreciate it!

Chris Dziewa
Chris Dziewa
17,781 Points

Anytime Mr. X! It just takes using it over and over for it to become second nature!

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Mr. x,

I believe that for the small screen you want to use max-width.

mrx3
mrx3
8,742 Points

Thank you Jeff for the help. I really appreciate it. I seem to getting the min and max mixed up. Thank you