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

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

Posted by Mohammad Zryab
Mohammad Zryab
4,109 Points

1. The two columns will appear but they aren't side-by-side. 2. The email link stretches too far wide

Here is the site I'm using (I'm building out my own site with the course) http://mohammadzryab.com/contact.html.

I copied and pasted the contact html, and the responsive and style css code below. (For some reason in workspaces, it says the </footer>, </div>, </body>, </html> are all incorrect at the bottom. On my site in runs just fine.

https://w.trhou.se/beskatxn57

Mohammad Zryab
Mohammad Zryab
4,109 Points

For some reason in workspaces, it says the footer, div, body, and html closing braces are incorrect. Not sure why because the site runs just fine.

4 Answers

David Gardner
David Gardner
10,143 Points
David Gardner
David Gardner
10,143 Points

You are missing a closing anchor tag on your instagram link in your footer (line 42), this is why it says the closing tags are wrong. Your columns are not aligned because you have a 150px top margin in line 189 of style.css, change this to 20px and it will line up. Your email link is extending the whole way because it is inheriting the 40% you gave it in responsive.css. To fix this you can give it a max width in your .contact-info a rule (starts line 200). Right after padding: 0 0 0 30px; add the rule max-width:30px

Zwelihle Sikhakhane
Zwelihle Sikhakhane
807 Points
Zwelihle Sikhakhane
Zwelihle Sikhakhane
807 Points

Hi Mohammand

To add onto what David stated on the first point. this is what you have on your code:

<a href="https://www.instagram.com/zryab/"> <img src="images/instagram logo.png" alt"Instagram Logo" id="SocialMedia">

This is what is should look like with the closing anchor tag:

<a href="https://www.instagram.com/zryab/"> <img src="images/instagram logo.png" alt"Instagram Logo" id="SocialMedia"></a>

Thank you

Mohammad Zryab
Mohammad Zryab
4,109 Points
Mohammad Zryab
Mohammad Zryab
4,109 Points

Thanks so much guys! That worked! :D

Sam Abdoh
Sam Abdoh
2,428 Points
Sam Abdoh
Sam Abdoh
2,428 Points

I had the exact same problem with my email getting cut off (it got to hotmail. instead of showing the full hotmail.com). However the suggestion of adding a max-width: 30px; didn't have any affect on mine. Instead I had to increase the column width of #secondary for 40% to 45%. Not sure if I was doing something wrong on the padding section...