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
Victor Purol
7,776 PointsIcons 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.
Victor Purol
7,776 Points@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
Matt Fair
8,935 PointsHello,
looks you forgot a semi-colon after "width:40%" on your responsive.css. I did the exact same thing!
Dan Kinchen
1,688 Pointspost your code please
Berkan Sonmez
3,403 PointsSame happened me too on Mozilla ! Seems like your coding is just same as mine but we both have the same problem!
Keith Greatz
4,377 PointsHey 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.
Victor Purol
7,776 PointsVictor Purol
7,776 Points<!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>