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 12, 2017 1:05pm by

Why does my page crash when I implement the second media query?

Hello All,

A question here, whenever I seem to adjust the header + navigation exactly as is shown in this lesson, they crash once above the 660px minimum set...

I have been following this course exactly as is from the start, just recently bumped into this issue..

Tried to revist the header & nav selected elements in the main.css file but all seems good there, here is my responsive.css code for the second medai query (for responsivness above 660px) & thanks for any help possible on this.

• UPDATE: this question has been answered. For your refrence on the probelm & solution, please see bellow & kindly find the: index.html / main.css / responsive.css files in the disucssions bellow.

February 13, 2017 12:34am

Kareem please fork your workspace and post it so we can have a look.

February 13, 2017 2:19pm

Hello Hadi, thanks for offering to help with this. Kindly find bellow 2 files: 1. main.css & 2.responsive.css - My initial issue was that once the screen resolution goes above 660px the header & all it's elements (h1, h2, nav & background colors) start to crash. However, in the tutorial this was not the case and so I am not sure where in my code I must have went wrong. Please let me know if you need any further files in my workspace, and if so, please advise how can I "fork" them for you on this discussion. Thanks & I appreciate any help on this!

• Main.css

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

a {

}

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

header {
  font: 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.75em;
  color: #bdc3c7;
}



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


.profile-pic {
  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 devices */

nav {
  background: #599a68;
}

/* logo text*/

h1, h2 {
  color: #fff;
}

/* links */

a {
  color: #6ab47b;
}

/* nav links */

nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */

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

• 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-pic {
    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; 
  }

}

4 Answers

February 19, 2017 5:42pm

Kareem, I guess I found your error. And it was in your CSS file all along. Look at the CSS rule for the header element in your main.css file:
The very first property should be float with a value of left, but you wrote font: left;. Easy to miss. Also, you forgot a semicolon in the rule for the nav element (possible that this had something to do with it as well).

I hope this fixes your problem!

February 19, 2017 5:58pm

Thanks Christian, you got it! Probelm solved! I really appreciate your help, and also, thanks for the tip on how to properly share the formated code in the community discussions :)

February 17, 2017 1:04pm

Your CSS is valid and looks correct. I'd guess the problem might have originated in your actual HTML files. Would you care to share these as well?

Also, when posting large chunks of code, you can format them by using the backtick character (accent grave,) and not the apostrophe or the accent aigu (or "forwardtick"). That's why your code above isn't formatted at all. (:

February 18, 2017 8:44pm

Thanks Christian! Sharing the html bellow:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kareem | Entrepreneur</title> 
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
    <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>Kareem Nuseibeh</h1>
        <h2>Freelancer</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>Experimentation with color and texture.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>  
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/karepreneur"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
         <p>&copy; 2017 Kareem Nuseibeh</p>
      </footer>
    </div>  
  </body>
</html>

February 17, 2017 12:17pm

Hey, what exactly do you mean by "crash"?

February 17, 2017 12:38pm

Hey Christian. Well in terms of alignment of header items, they just tend to go out of place and the background reduces to a very thin line... I managed to fix this somehow by playing around with the float & margin properties. However, as I was following through with the course, this shouldn't have happened and thus the confusion...

April 17, 2017 4:57pm

Kareem, what exactly did you do with this: "I managed to fix this somehow by playing around with the float & margin properties"?

I'm having the same problem you describe but don't have the CSS errors Christian pointed out.

https://w.trhou.se/w9c5sft39w

April 17, 2017 6:40pm

Hello Emily,

look at line 59 of your main.css. You wrote: margin: 20 px 0 0; Also, you're missing a whole rule in the heading section:

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

I'm not sure how far advanced you are in this course, that's why I'm not posting more differences. You should probably download the project files and check against the main.css provided.

Hope that helps. If not, let me know.

Best wishes, Christian

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?

kareemnos

kareemnos

Why does my page crash when I implement the second media query?

Hadi Khalili

Hadi Khalili

kareemnos

kareemnos

4 Answers

Christian Blume

Christian Blume

kareemnos

kareemnos

Christian Blume

Christian Blume

kareemnos

kareemnos

Christian Blume

Christian Blume

kareemnos

kareemnos

Emily Thompson

Emily Thompson

Christian Blume

Christian Blume