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

Benjamin Forman
Benjamin Forman
853 Points
Posted by Benjamin Forman
Benjamin Forman
853 Points

Issue floating NAV elements to the right in 660px media query.

When I added the css for the NAV in the 660px media query it causes the enitre background to go white and also causes all the other content on the webpage to float to the right for the "about" and "contact" pages. If I remove the "float: right" from the css, everything is fine with the background and other content on the pages.

Below is the responsive css from the 660px media query.

@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 {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
  }
}

Here is the html for the about page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ice Holes | Goalie</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Ben Forman</h1>
        <h2>Goalie</h2>
      </a> 
      <nav>
        <ul>
          <li><a href="index.html" >Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt ="photograph of nick petit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, This is my website.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com">@nickrp</a>.</p>
      </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/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Ben Forman.</p>
      </footer>
    </div>  
  </body>
</html>
dnogmdehbp
dnogmdehbp
Courses Plus Student 726 Points

Whit media querys the problem is, it will take up the "normal" code for nav. So could you also post the original nav, not set to a media query.

in example: this following code will give you twice a red background. Even if you didn't set it @660px.

nav{

    background-color:red;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
}


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

    float: left;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: left;
    width: 100%;


}

4 Answers

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

This is happening because your using min-width. So it's telling your browser to apply those styles whenever your screen is bigger than 660px. If you use max-width: 660px it tells it to apply the styles, whenever your screen is below 660px. And I'm assuming your computer screen is larger than 660px.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Benjamin,

The first thing I would check is whether you have the header floated left in "main.css"

from main.css:

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

Check if that's missing or if there are any syntax errors that would cause it not to be applied.

Benjamin Forman
Benjamin Forman
853 Points
Benjamin Forman
Benjamin Forman
853 Points

Hi Jason,

I checked the header in the main.css and i do have it floated left. I checked the syntax and everything looks ok. Any other ideas on what is causing this?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Do you mind posting that part of the css? I'm sorry to ask but there could be one little thing wrong that you're missing because you've been staring at it too much.

I'm trying to think of what else it might be if it's not this.

Have you changed the colors in the project or anything else, or have you kept strictly to the instruction?

Are you saying that the green header background collapses once you're above 559px?

Benjamin Forman
Benjamin Forman
853 Points
Benjamin Forman
Benjamin Forman
853 Points

No problem. The main.css is posted below. I have been keeping strictly to the instruction. The green header disappears and for the "about" and "contact" pages all of the content on the page seems to float right.

/************************
GENERAL
*************************/

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

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

a {
  text-decoration: none;
}

img {
max-width: 100%;
}

h3 }
  margin: 0 0 1em 0;
}

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

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

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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  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: PORTFOLIO
*************************/

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

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

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



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

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


/************************
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');
}

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



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

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

/* green header */
header {
 background: #6ab47b;
 border-color: #599a68;
}

/* nav background on mobile */
nav{
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links  */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
dnogmdehbp
PLUS
dnogmdehbp
Courses Plus Student 726 Points
dnogmdehbp
dnogmdehbp
Courses Plus Student 726 Points

can you also change ''' to ``` ?

Benjamin Forman
Benjamin Forman
853 Points
Benjamin Forman
Benjamin Forman
853 Points

Just noticed what was wrong when I pasted the main.css above. Under the wrapper section i accidentally had the opening curly bracket facing the wrong way! Everything works fine now.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Glad you figured it out.

I did some testing on that syntax error and it seems with the wrong curly brace on the h3 that the browser ignores all of the h3 and header styles but then recovers and the #logo styles are applied. So without the float: left on the header being applied it will collapse and not contain it's floated children.