Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Media Queries Selectively Rendering

Why are is my media query for #logo being ignored?

The background colour is showing up, but it won't resize to 20% on larger screens.

 @media only screen and (min-width: 640px), only screen and (min-device-width: 640px) {
    #logo{
        width: 20%;
        background: yellow;
    }

    /*for test only*/
    body{ 
         background-color: red;
    }
    }

Please post the code.

On another note, the site is hard on the eyes to read. Look at your color scheme. The black text and light blue links in the blog could be improved.

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

It's in development, so it's not up for design review. :)

3 Answers

Natasha McDiarmid
Natasha McDiarmid
11,400 Points

I found out what the problem was based off this Stackoverflow question:

http://stackoverflow.com/questions/19038240/media-query-styles-not-overriding-original-styles

I needed to prepend an ancestor element to it. I don't recall ever having to do this in the past. Here's the updated code:

  @media only screen and (min-width: 640px), only screen and (min-device-width: 640px) {
    header #logo{
        width: 20%;
        background: yellow;
    }

    /*for test only*/
    body{ background-color: red;
    }
  }

I am on my iPad right now. I have an app that lets me see the code and what style sheets and JavaScript files are attached. It says the only stylesheet attached is the font awesome sheet. When I look at your page code, it says there should be a ton more. There is a problem either with your code or my app.

This is what I was able to find in a CSS file:

  @media only screen and (min-width: 640px), only screen and (min-device-width: 640px) {
    #logo{
        width: 20%;
        background: yellow;
    }

It is not applied on my iPad, but my iPad does not seem to see the file.