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?

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.

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.