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

Bogdan Plesa
Bogdan Plesa
1,397 Points
Posted by Bogdan Plesa
Bogdan Plesa
1,397 Points

Why <section id="secondary"> won't go to the right in line with <section id="primary"> for width>480px ?

I have set in responsive.css #primary { width:50%; float:left; } #secondary { width:40%; float:right; } and also added <section id="primary"> and <section id="secondary"> in about.html , as in the tutorial . When screen is resized more than 480px the columns look like this

General information .................................................................. ..................................................................

                                     Contact details
                                      ......................

instead of in line . Can you tell me what I could have done wrong ? Thank you

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Bogdan,

I would post your html for those two columns as well as post your css for the 480px media query.

This thread shows how to post code: https://teamtreehouse.com/forum/posting-code-to-the-forum

3 Answers

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Hey Bogdan,

Note that the primary and secondary IDs in this course are for the Contact page, and not the About page. Also, here are things to resolve the issue:

1) Make sure you have stated a breakpoint, exactly like this: @media screen and (min-width: 480px)

2) Make sure you have added the primary and seconday IDs to your Contact page like this: 

<section id="primary">
  <h3>General Information</h3>
  <!--Your paragraphs here-->
</section>
<section id="secondary">
  <h3>Contact Details</h3>
  <!--Your details-->
</section>

3) Debug your responsive.css and contact.html pages for errors, unclosed tags, wrong selectors or unclear declarations.

Let me know if you still have an issue.

Fung How Lim
Fung How Lim
2,402 Points
Fung How Lim
Fung How Lim
2,402 Points

Thanks Isaac A.

A year later and your recommendation solved one of my issues. Cheers buddy. Hope you're still active in TH!

Bogdan Plesa
Bogdan Plesa
1,397 Points
Bogdan Plesa
Bogdan Plesa
1,397 Points

Thanks for your answer , I've re-typed and checked several times . I can't seem to find any errors, unclosed tags, wrong selectors or unclear declarations . The contact page (not the about - sorry) looks the same .The result looks the same for >480px General Iinformation .......................................................................................................................

                                                                                           Contact details
                                                                                           ........................

The second column floats to the right , but not in line with the first one . For <480px the columns are centered . I tried also different max-width: 1000/1200px ; for #wrapper in main.css => same result .

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Can you give me a screenshot? Your code is empty here... Or place all your code here. I'll be able to help you better :)

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

No problem, Fung! I'm currently not active on Treehouse right now, but I still follow the updates!