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 trialBogdan Plesa
1,397 PointsWhy <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
3 Answers
Isaac Asante
4,752 PointsHey 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
2,402 PointsThanks Isaac A.
A year later and your recommendation solved one of my issues. Cheers buddy. Hope you're still active in TH!
Bogdan Plesa
1,397 PointsThanks 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
4,752 PointsCan 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
4,752 PointsNo problem, Fung! I'm currently not active on Treehouse right now, but I still follow the updates!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi 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