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

Katie Charles-McGrath
Katie Charles-McGrath
1,823 Points

Media queries screw things up.

After adding the media queries in responsive.css, the gap at the top of the page reappears but only on the "About" page. Additionally, the iconography on the Contact page is all the way to the left side of the page on wider widths. I've tried copying and pasting the files included with this video and the issue still occurs.

Katie Charles-McGrath
Katie Charles-McGrath
1,823 Points

Here's my code:

CONTACT PAGE

<!DOCTYPE HTML>
<HTML>
  <head>
    <meta charset="UTF-8">
    <title>Katie McGrath | Aspiring Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Arimo|Noto+Sans:400,400italic,700,700italic' 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>Katie McGrath</h1>
        <h2>Aspiring Developer</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>I am currently available for part time web development work.  The best way to reach me is by email.</p>

      </section>
      <h3>Contact Details</h3>
      <ul class="contact-info">
        <li class="phone"><a href="tel:555-6425">555-6425</a></li>
        <li class="mail"><a href="mailto:kacmcgrath@gmail.com">kacmcgrath@gmail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name:ktamcgrath">@ktamcgrath</a></li>

      </ul>
      <section id="secondary">
      </section>
      <footer>
        <a href="https://twitter.com/ktamcgrath"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="https://www.facebook.com/katie.charlesmcgrath"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>

        <p>&copy; 2015 Katie McGrath.</p>
      </footer>
    </div>
  </body>
</HTML>

ABOUT PAGE

<!DOCTYPE HTML>
<HTML>
  <head>
    <meta charset="UTF-8">
    <title>Katie McGrath | Aspiring Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Arimo|Noto+Sans:400,400italic,700,700italic' 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>Katie McGrath</h1>
        <h2>Aspiring Developer</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/katie.jpg" alt="a picture of katie mcgrath" class="profile-photo">
        <h3>About</h3>
          <p>Hi, I'm Katie McGrath.  This is my fake website!</p>
          <p>If you'd like to follow me on Twitter my username is <a href="https://twitter.com/ktamcgrath">@ktamcgrath</a></p>

      </section>

      <footer>
        <a href="https://twitter.com/ktamcgrath"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="https://www.facebook.com/katie.charlesmcgrath"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>

        <p>&copy; 2015 Katie McGrath.</p>
      </footer>
    </div>
  </body>
</HTML>

MAIN.CSS

/*********************************
GENERAL
**********************************/
body {
  font-family: 'Noto Sans', sans-serif;
}

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

a {
  text-decoration:none;
}

img {
  max-width:100%;
}

h3 {
  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: 'Arimo', 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.75em;
  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:white;
  color: #999;
}

/* green header */
header {
  background: #006666;
  border:#009966;
}

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

/* links */
a {
  color: #006666;
}

/* nav background on mobile */
nav {
  background:#009966;
}

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #00CC66;
}

RESPONSIVE.CSS

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

  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

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

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



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


}

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Katie,

If you use Google Chrome you can search in Chrome Dev Tools to find the element that's causing the gap to appear. It might be a problem to do with collapsed margins. Immediately I would start by looking at the image in about.html with the class of profile-photo.

Use it to investigate and see what the difference is between the 2 pages.

Good luck :)

Katie Charles-McGrath
Katie Charles-McGrath
1,823 Points

Thanks for the tip. It turned out that I had:

h3 {
  0 0 1em 0;
}

Instead of

h3 {
  margin: 0 0 1em 0;
}

Doh! So, there were some styles from normalize.css that were not being overridden.