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

William McManus
William McManus
14,819 Points
Posted by William McManus
William McManus
14,819 Points

CSS header styling in my responsive.css file is only affecting 2/3 pages.

When the breakpoint breaks over to the 660px format, and the nav BGcolor is supposed to reset to 'none', it only works for the portfolio and about pages. For some reason the contact page remains unaffected. THe rest of the CSS styling like float etc. all work fine on all three pages, but the background just wont be affected no matter what I try.

Here is the code:

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



/************************
Two Column Layout
************************/
#primary {
  width: 50%;
  float: left; 
}

#secondary {
  width: 40%;
  float: left;
}



/************************
Page Portfolio
************************/
#gallery li {
    width: 28.3333%;
  }
#gallery li:nth-child(4n) {
    clear: left;
  }


  /************************
Page About
************************/
.profile-photo {
    float:left;
    margin: 0 5% 80px 0;
  }



}

@media screen and (min-width: 660px) {
  /************************
Header
************************/
  nav {
    background: none;
    float: right;
    font-size: 1.25em;
    margin-right: 5%
    width: 45%;
  }

  #logo {

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

  h1 {
  font-size 2.5em;  
  }
  h2 {
    font-size: 0.825em;
  }
}

Let me know what you think.

Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points

I have a couple of ideas. Error in the html code contact page. Check in with html validator - https://validator.w3.org/ Directly in the page code contacts a certain style as <style> .... </ style> for nav element There is a specific rule for the contact page, which rank higher and overrides @media rule

2 Answers

Vitaliy Bogdanov
Vitaliy Bogdanov
7,612 Points

OK. I can see where the problem is. On the contact page The order of the files of other styles, is such:

<link rel = "stylesheet" href = "css / responsive.css">
<link rel = "stylesheet" href = "css / main.css">

Browser following the rule of "who later makes right", overwrites the rules from the first file of the rules of the second. It is necessary to arrange a line like this:

<link rel = "stylesheet" href = "css / main.css">
<link rel = "stylesheet" href = "css / responsive.css">
William McManus
William McManus
14,819 Points
William McManus
William McManus
14,819 Points

Thanks! that was driving me crazy. Knew it had to be something on that page, but couldn't see it.

William McManus
William McManus
14,819 Points
William McManus
William McManus
14,819 Points

The code checks out on W3. Mostly, it doesn't like the google text Style Sheet. But even if I deactivate or delete that it does the same thing. Here's the code for the contact page:

'''html

<!DOCTYPE html> <html> <Head> <meta charset="utf-8"> <title>Liam Bonnie|Artist</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com /css?family=Changa+One|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/main.css"> <body> <header> <a href="index.html" id="logo"> <h1>Liam Bonnie</h1> <h2>Artist</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected" >Contact</a></li> </ul> </nav>

    </header>
      <div id="wrapper">
   <section id="primary">

     <h3>General Information</h3>
     <p> Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...Text  ...</p>
   </section>
    <section id="secondary">
       <h3>General Information</h3>
        <ul class="contact-info">

          <li class="phone"><a href="tel:206-555-5555" >606-555-555</a></li>
          <li class="mail"><a href="mailto:billy@oh-billy.com">billy@oh-billy.com</a></li>
        </ul>


  </section>

  <footer>
    <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <p>&copy; 2014 Liam Bonnie.</p>
  </footer>

</div> </body> </html>

'''