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

Tristan Brown
Tristan Brown
590 Points

My icons aren't moving to the right with the rest of my contact details.

In the desktop size of my page, the contact info moves to the right but the icons stay to the left getting in the way of the #primary section. the mobile size looks fine though.


@media screen and (min-width: 480px) { /************************** TWO COLUMN LAYOUT **************************/ #primary { width: 50%; float: left; }

#seconday {



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



/************************** GENERAL **************************/ body { font-family: 'Slabo 27px', Oswald; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; clear: left; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 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: 'Slabo 27px', Oswald; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 1em; margin: -5px 0 0; font-weight: normal; }

/************************** NAVIGATION **************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav a { font-family: 'Oswald', 'Slabo 27px'; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800px; padding: 15px 10px; }

/************************** FOOTER **************************/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 25px; height: 25px; 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-picture { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 10%; }

/************************** 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('../images/phone.png'); }

.contact-info li.email a { background-image: url('../images/mail.png'); }

.contact-info li.twitter a { background-image: url('../images/twitter.png'); }

/************************** COLORS **************************/

/* site body */ body { background-color: #fff; color: #999; }

/* grey header*/ header { background-color: #696969; border-color: #000000; }

/* logo text */ h1, h2 { color: #fff; }

/* nav background on mobile */ nav { background-color: #444443; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #000000; }

a { color: #000000; }


<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tristan Brown | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Oswald' 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>Tristan Brown</h1> <h2>Web Designer</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 always looking for new work opportunities! If you have any questions, you can reach me by phone, email, or Twitter.</p> <p>Feel free to leave a voicemail if I don't answer a phone call right away. I will get back to you the same day.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:503-278-0696">503-278-0696</a></li> <li class="email"><a href="mailto:legonerdtb96@gmail.com">legonerdtb96@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=triss66">@triss66</a></li> </ul> </section> <footer> <a href="https://twitter.com/gmail_tristan"><img src="images/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/tristan.brown.313"><img src="images/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a> <p>© 2015 Tristan Brown.</p> </footer> </div> </body> </html>

Hi! I think it´s a typo error, check de ID Secondary you got "seconday".

Tristan Brown
Tristan Brown
590 Points

Ah yes! I fixed the typo and it worked no problem. Thank you so much :)

1 Answer

Posting code might help

Tristan Brown
Tristan Brown
590 Points

Oh, sorry. Ill put it up

Don't forget CSS too if it's in a separate file

Tristan Brown
Tristan Brown
590 Points

Im not sure how to do that.. heh. sorry im still a bit new to this website.

Tristan Brown
Tristan Brown
590 Points

Okay, I added it in the question :)

There are just too many files you are using :p I am not able to run your website and replicate your problem. Post all css files. I think you missed normalize.css

Tristan Brown
Tristan Brown
590 Points

I fixed it! It was just a typo in my responsive.car xD thank you for replying though :)