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

Icons are stuck on left side of contact page when in two column mode.

When I use the two column layout on the contact page the phone, email, and facebook icons stayed in the primary column amongst the text instead of following the contact info to the secondary column. Looks fine in mobile view mode, but is a mess in desktop mode.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Victor Purol | Coder </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Victor Purol</h1> <h2>Coder</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 available for a various array of work, including HTML and CSS, general contracting, and musical gigs.</p> <p>Please use phone for urgent inquiries. Otherwise, Facebook and Email are good options. </p> </section> <section id="secondary"> <h3> Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:502-396-7726">502-396-7726</a></li> <li class="mail"><a href="mailto:victor.purol@gmail.com">victor.purol@gmail.com</a></li> <li class="facebook"><a href="https://www.facebook.com/victor.purol">www.facebook.com/victor.purol</a></li> </ul> </section> <footer> <a href="http://twitter.com"><img src="twitter-wrap.png" alt="Twitter Logo" class="social"></a> <a href="http://facebook.com/victor.purol"><img src="facebook-wrap.png" alt="Facebook Logo" class="social"></a> <p>© 2014 Victor Purol.</p> </footer> </div> </body> </html>

@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) {

}

4 Answers

Hello,

looks you forgot a semi-colon after "width:40%" on your responsive.css. I did the exact same thing!

Dan Kinchen
Dan Kinchen
1,688 Points

post your code please

Berkan Sonmez
Berkan Sonmez
3,403 Points

Same happened me too on Mozilla ! Seems like your coding is just same as mine but we both have the same problem!

Keith Greatz
Keith Greatz
4,377 Points

Hey Victor, I checked mine as I still basically have that set out for my webpage, The responsive CSS is the same as your's and mine works, can you add to your post your CSS so I have all your code please.