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

HTML

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Posted by 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;
    }
    }
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

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
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
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;
    }
  }
Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

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.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

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.