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 Build a Three Column Layout

Posted by Cory Tipton
Cory Tipton
590 Points

I need help figuring out why my columns won't stack at the breakpoint i have set

I've went over this over and over again. I've placed both id's in the correct sections at contact.html. I will copy and paste my entire code I've wrote on responsive.css and then i'll post my entire contact.html code. PLEASE HELP! i'm beginning to become really frustrated.

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

/***********

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

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

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

}

}

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

}

Here is the entire contact.html code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cory Tipton | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil|Julius+Sans+One|Wire+One" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Cory Tipton</h1> <h2>Designer | Artist</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></l1> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am currently available for new design work. Feel free to contact me at anytime and we can further discuss your needs.</p> <p>Please only use phone contact for urgent inquiries. Otherwise social media and E-mail are the best ways to contact me.</p> </section> <section id="secondary"> <h3>Contact Information</h3> <ul class="contact-info"> <li class="phone"><a href="tel:828-***-****">828--*</a></li> <li class="mail"><a href="mailto:cory.tipton7@icloud.com">cory.tipton7@icloud.com</a></li> <li class="twitter"><a href="html://twitter.com/intent/tweet?screen_name=@exampletwitter">@exampletwitter</a></li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2017 Cory Tipton.</p> </footer> </div> </body>
</html>

Cory Tipton
Cory Tipton
590 Points

hope you can understand with it all jumbled like this.

2 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

Yeah, like I said, it works good on Firefox, I suggest you grab up all the browsers to test your code. It helps to fix issues. :)

No worries!

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

I've went over your code... even cleaned it up...

I referenced the videos to ensure I understood the material required.

Your CSS is good, and your HTML is "okay" I found an element that throws your whole doc out of whack, BUT, even with that, in FireFox, I find no issues, perhaps this is a browser thing.

Here's the fix from my perspective (fix annotated by comment):

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Cory Tipton | Designer</title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil|Julius+Sans+One|Wire+One" rel="stylesheet"> 
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/responsive.css"> 
  </head> 
  <body> 
    <header> 
      <a href="index.html" id="logo"> 
        <h1>Cory Tipton</h1> 
        <h2>Designer | Artist</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>
          </l1>   <!-- Here you have a numeric "one" instead of an 'i', not sure if this will fix YOUR screen, however, the code still runs, and your contact information stacks nicely at the breakpoint -->
        </ul> 
      </nav> 
    </header> 
   <div id="wrapper"> 
      <section id="primary"> 
        <h3>General Information</h3> 
        <p>I am currently available for new design work. Feel free to contact me at anytime and we can further discuss your needs.</p> 
        <p>Please only use phone contact for urgent inquiries. Otherwise social media and E-mail are the best ways to contact me.</p> 
      </section> 
      <section id="secondary"> 
        <h3>Contact Information</h3> 
        <ul class="contact-info"> 
          <li class="phone"><a href="tel:828-***-****">828--*</a>
          </li> 
          <li class="mail">
            <a href="mailto:cory.tipton7@icloud.com">cory.tipton7@icloud.com</a>
          </li> 
          <li class="twitter">
            <a href="html://twitter.com/intent/tweet?screen_name=@exampletwitter">@exampletwitter</a>
          </li> 
        </ul> 
      </section> 
      <footer> 
        <a href="http://twitter.com/nickrp">
          <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        </a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> 
        <p>© 2017 Cory Tipton.</p> 
      </footer> 
      </div> 
  </body>
</html>
Cory Tipton
Cory Tipton
590 Points

maybe it is the browser i just don't understand i'm running safari i don't know why it wouldn't work. is that "1" the only issue you seen? and i really appreciate the help!