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 trialAlex Cleanthous
1,658 PointsSocial 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
1,658 PointsNevermind. I figured it out! Hurray! A couple typos was all that it was.
Justin Sze Wei Teo
9,418 PointsOh wait.. i figured it out.. it was my <section id="secondary"> , didnt put it before <h3> Generation Information </h3>
mendelbakaleynik
1,009 PointsCan 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
5,186 PointsI 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.
mendelbakaleynik
1,009 PointsJaime, 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) {
}
mendelbakaleynik
1,009 PointsI 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'); }
mendelbakaleynik
1,009 PointsHey 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
5,186 PointsHi 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)
mendelbakaleynik
1,009 PointsThanks Jaime for the advice. I will check it out.
Tonya Pace
900 PointsI 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.
mendelbakaleynik
1,009 PointsThat 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.
Justin Sze Wei Teo
9,418 PointsJustin Sze Wei Teo
9,418 PointsAlex, I have the exact same issue! Did you figure out where the error was?