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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Shane Thompson
Shane Thompson
2,443 Points
Posted by Shane Thompson
Shane Thompson
2,443 Points

nav element background not "clearing" (none)

Snapshot: https://w.trhou.se/feuzu3qg37

I have used Chrome's Dev tool (CTRL_SHIFT_i) and still cannot figure out the issue.

  1. Using this tool I don't see the responsive.css in the styles, but i know it's at least reading it as other things are changing.

  2. I had to in the responsive.css add padding of 2% to the header otherwise my light green background would go to the top of the page.

  3. the nav element's background will not go away when @media screen and (min-width: 660px) is triggered.

Help...

1 Answer

Rajen Tandel
Rajen Tandel
25,511 Points
Rajen Tandel
Rajen Tandel
25,511 Points

Hi Shane, You're missing the / before and after the "HEADER" comment just below the media querie. They have to begin with /* and end with */.

@media screen and (min-width: 660px) {

  *********************************
  HEADER
  **********************************

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    padding: 2%;
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
  }



}
Shane Thompson
Shane Thompson
2,443 Points
Shane Thompson
Shane Thompson
2,443 Points

Thank you, I figured it had to be something so simple....

I also changed the padding to 'padding: 0 0 10% 0;' this "fixes" the header background issue i'm having though I don't think its "proper".

whenever I step into the 660 media screen the "size" of the header element changes.

before: width x 112px after: width x 0px

why? I'm not "resetting" anything....