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 Stacy Hoover
Stacy Hoover
1,288 Points

Nav & Header not working with 660px Media Queries

I am having issues with my Nav & Header not working with the CSS for the 660px Media Queries.

HERE IS THE CODE:

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

  #prime {
    width: 50%;
    float: left;
  }

  #second {
    width: 40%;
    float: right;
  }

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

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

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

#logo {
    float: left;
    text-align: left;
    margin-left: 5%;
    width: 45%;
  }  
}
main.CSS 
/*************
GENERAL
**************/

body {
  font-family: 'Open Sans Condensed', sans-serif;
}

a {
  text-decoration: none;
}

#wrapper {
 max-width: 940px;
 margin: 0 auto;
}

/*Site Body*/
body {
  background-color: #fff;
  color: #999;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;

}

/*************
HEADING
**************/

header {
  float: leaft;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'lobster', serif;
  margin: 15px 0 0;
  font-size: 1.75em
  font-weight: normal;
  line-height: 1.8em;
}

h2 {
  font-family: 'Open Sans Condensed', sans-serif;
  margin: -5 px 0px 0;
  font-size: 0.75em;
  font-weight: normal
}


/*************
NAVIGATION
**************/

nav {
  text-align: center;
  padding: 10px 0;
  margin 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a{
  font-weight: 800;
  padding: 15px 10px;
}

/*************
FOOTER
**************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*************
PAGE PORTOFILIO
**************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: bd32c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: bdc3c7;
}



/*************
PAGE ABOUT
**************/

.profile-photo {
  display: block;
  max-width: 100%;
  margin: 0 auto 30px;
}


/*************
PAGE Contact
**************/

.contact-info{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a{
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
   background-image: url('../img/phone.png')
}

.contact-info li.mail a {
   background-image: url('../img/mail.png')
}



/*************
COLORS
**************/

/*Header Color*/
header {
  background: #A1D6BD;
  border-color: #A14217;
}
/*logo text*/
h1, h2 {
  color: #fff;
}
a {
color: #A14217;
}

 /*logo text*/ 
nav {
  background: #A14217;
  }
/*Nav visited text*/
nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
 color: #32673f; 
}

<html>
  <head>
    <meta charset="utf-8">
    <title>Bluetick | Design + Build</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Bluetick</h1>
        <h2>Desing/Build</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id=gallery>
          <li>
            <a href="img/numbers-01.jpg">
                <img src="img/numbers-01.jpg" alt="">
                <p>1400 Walnut Table</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
                <p>2058 Walnut Bed</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-03.jpg">
                <img src="img/numbers-03.jpg" alt="">
                <p>1400 Walnut Table</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-04.jpg">
                <img src="img/numbers-04.jpg" alt="">
                <p>1400 Walnut Table</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-05.jpg">
                <img src="img/numbers-05.jpg" alt="">
                <p>1400 Walnut Table</p>
            </a>
          </li>
        </ul> 
      </section>
      <footer>
        <a href="http://twitter.com/stacy"><img src="img/twitter-wrap.png" alt="Instagram" class="social-icon"></a>
        <a href="http://Facebook.com/stacy"><img src="img/facebook-wrap.png" atl="Pinterest" class="social-icon"></a>
        <p>&copy; 2014 Bluetick Design</p>
      </footer>
    </div>
   </body>
</html>

6 Answers

Greg Kaleka
Greg Kaleka
39,021 Points

You're either going to laugh or cry when I tell you this:

The whole issue is due to a single letter in a rule in your main.css:

main.css 
/*************
HEADING
**************/

header {
  float: leaft;           //notice anything odd here?
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

:)

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Stacy!

Is this all your code? If so, the problem is that the rules inside each @media query will only be applied at a given width.

In this case, none of the styles you've defined for nav will be applied unless the viewport is wider than 660px.

What you want to do is set the base styles outside the @media queries, and then inside them, you can change what needs to be changed to accommodate the different screen sizes.

If this isn't all your code, can you post the rest of it, and also let us know with a bit more detail what the problem you're seeing is?

Cheers,

Greg

Stacy Hoover
Stacy Hoover
1,288 Points
Stacy Hoover
Stacy Hoover
1,288 Points

This is just the responsive.css - when I did the test changes (background-color: navy) those worked, but ones above are not working.

When I have my screen full size (larger than 660) my logo disappears, my nav background turns to white and pushed my content down on the right column.

Greg Kaleka
Greg Kaleka
39,021 Points

Can you post your main.css, or whatever your base stylesheet is? You can post it in a comment, or edit your initial question. Paste your code in like this:

```CSS

[paste your code here]

```

This will add code highlighting to your code (I did that for you in your original question).

I'm thinking that background: none might be a problem, but it's hard to know.

Stacy Hoover
Stacy Hoover
1,288 Points
Stacy Hoover
Stacy Hoover
1,288 Points

OK - I pasted the Main CCS. Thank you for reviewing this. It has been smooth sailing until now. Boo.

Greg Kaleka
Greg Kaleka
39,021 Points

OK here's the problem: Your page's background color is white, and your logo text is white. So. When you set the background of your nav to none, you now have white text (nav elements) on a white background (body). So that's where your logo is going. You can test this by trying to highlight with your mouse where the logo should be. You probably want to add a rule inside that nav rule that says color: #333; or something, so you can see your logo text :)

As for the content on the right, I'm not sure what you mean. Can you add your HTML?

Stacy Hoover
Stacy Hoover
1,288 Points
Stacy Hoover
Stacy Hoover
1,288 Points

OK - I posted the HTML. I do know the HTML is incomplete in the gallery section, I am just trying to get through the principals and did not spend a bunch of time filing out redundant elements.

As for the white on white, I do get that. But the entire space for the logo disappears. The Header bar becomes a sliver, not even large enough to highlight.

Stacy Hoover
Stacy Hoover
1,288 Points
Stacy Hoover
Stacy Hoover
1,288 Points

I laughed! Thank you so much! I knew it was something silly.

Greg Kaleka
Greg Kaleka
39,021 Points

Hah well that's good.

Happy coding!