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

Watch Video

Posted February 20, 2016 12:27pm by

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.

February 20, 2016 12:30pm

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

February 20, 2016 2:07pm

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 :)

February 20, 2016 7:42pm

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.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Katie Charles-McGrath

Katie Charles-McGrath

Media queries screw things up.

Katie Charles-McGrath

Katie Charles-McGrath

1 Answer

Jonathan Grieve

Jonathan Grieve

Katie Charles-McGrath

Katie Charles-McGrath