Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Alex Cleanthous
Alex Cleanthous
1,658 Points

Social icons not staying inline

I am working adding columns to my responsive site. Once I added the columns, my social icons are now overlapping text on the wrong column.

Here is an image.: https://www.dropbox.com/s/4hlvkvil5jhjcm4/Screenshot%202016-02-07%2006.05.08.png?dl=0

Contact Page HTML code:

<section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:509-777-1234">509-777-1234</a></li> <li class="mail"><a href="mailto:alex@example.com">alex@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=alexcleanthous">@alexcleanthous</a></li> </ul> </section>

CSS

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

Responsive CSS

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

}

/********************************** Two Column Layout ***********************************/

primary {

width: 50%; float: left; }

seconday {

width: 40; float: right; }

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

}

11 Answers

Alex Cleanthous
Alex Cleanthous
1,658 Points

Nevermind. I figured it out! Hurray! A couple typos was all that it was.

Justin Sze Wei Teo
Justin Sze Wei Teo
9,418 Points

Alex, I have the exact same issue! Did you figure out where the error was?

Justin Sze Wei Teo
Justin Sze Wei Teo
9,418 Points

Oh wait.. i figured it out.. it was my <section id="secondary"> , didnt put it before <h3> Generation Information </h3>

Can you guys shed some more light on this issue? I am having the same problem but checked my code very carefully for typos and found none. Where specifically did you find your typo/ mistake?

Jaime Gonzalez
Jaime Gonzalez
5,174 Points

I had the same issue, and my typos were in responsive.css where I called the id "seondary" instead of "secondary", so basically a mistake naming ids.

Hope it helps.

Jaime, I took a look but I didn't spot any typos. Here is my responsive.css code. I can also post my other css and HTML files if you guys can't spot a problem here. Thanks for the help, in advance.

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

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

}

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

}

I didn't add it to the above comment, but here is the pertinent code from my main.css file.

/************************************* PAGE: CONTACT *************************************/ .contact-info { list-style: none; padding: 0; margin: 0; font-size: 1.1em; }

.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'); }

Hey guys, sorry to keep on blasting the forum like this, but I think I found the answer. I mean, it definitely solves the answer, but I feel like it is sloppy and inefficient.

In my main.css I had written; .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'); }

In my contact.html file I wrote;

<section id"secondary"> <h3>Contact Details</h3> <ul class= "contact-info"> <li class="phone"><a href="tel:847-208-0883">847-208-0883</a></li> <li class="mail"><a href="mailto:613mendel@gmail.com"> 613mendel@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=@nickrp">@nickrp</a></li> </ul> </section>

For some reason my responsive.css code (see below) was only referring to .contact-info , and not to .contact-info li.phone a etcetera..

secondary {

width: 40%;
float: right;

}

My solution was to manually insert the above secondary styling to the images in main.css (see below)

.contact-info li.phone a{ background-image: url('../img/phone.png'); width: 40%; float: right; }

.contact-info li.mail a{ background-image: url('../img/mail.png'); width: 40%; float: right; }

.contact-info li.twitter a{ background-image: url('../img/twitter.png'); width: 40%; float: right; }

That solved the problem, but if anyone can shed some light on the issue, or can suggest a better fix, I would be much obliged.

Jaime Gonzalez
Jaime Gonzalez
5,174 Points

Hi Mendel, don't know if I'm missing something because you didn't posted your HTML code at first but after reviewing twice all your info it finally seems that you got it just right, at least it's the same as I have.

BTW, take a look a "code correction" within "teacher's notes" where Nick tell us about to use :nth-child(3n + 1) instead of :nth-child(4n)

Thanks Jaime for the advice. I will check it out.

I was having the same issue thinking it was a problem in my responsive.css. Turns out my issue was in my contact.html instead. When I created my 2nd <section> I was missing the opening tag. I didn't notice until this lesson because it was working fine previously.

ORIGINAL BAD CODE:

<section id="primary"> <h3>General Information</h3> <p>I am actively looking for new projects to broaden my experience and sharpen my skills. </p> </section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:971-713-8998">971-713-8998</a></li> <li class="mail"><a href="mailto:tinkeringtonya@gmail.com">tinkeringtonya@gmail.com</a></li> </ul> </section>

CORRECTED CODE: <section id="primary"> <h3>General Information</h3> <p>I am actively looking for new projects to broaden my experience and sharpen my skills. </p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:971-713-8998">971-713-8998</a></li> <li class="mail"><a href="mailto:tinkeringtonya@gmail.com">tinkeringtonya@gmail.com</a></li> </ul> </section>

I hope this helps anyone else who is having the same issue.

That seems like it would help solve your problem.

As I kept on moving on with the later videos my social icons and attached text kept on becoming more and more messy. I just tried taking out my ad-hoc code implementation of { width: 40%; float: right; } in each of the social icon selectors in my main.css

.contact-info li.phone a

And it seemed to have fixed itself. I don't really know what happened, if someone can explain it, that would be nice. Otherwise everything seems to be functioning properly now.

P.S. I just realized that I validated all my code through the WC3 Validator Service. (https://validator.w3.org) and the CSS Validator Service (https://jigsaw.w3.org/css-validator/) I corrected at least 20 bugs and syntactical errors throughout all my HTML and CSS files, perhaps one of those errors was causing an error which resulted in my social icons improperly formatting. The more I think of it, the more likely true it becomes.