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
Sohum Sanghvi
2,995 PointsOnly Showing Two Columns, not Three
I can not seem to get the three column layout after following the steps in the video. My contact page is working just fine, but my portfolio page is remaining at only 2 colums instead of 3. See my code below:
Responsive.css @media screen and (min-width: 480px) {
/****TWO COLUMN LAYOUT***/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: left; }
/******* 3*5=15 (margin of 2.5 +2.5 on each side) 100%-15% = 85% 85 / 3 = 28.33333333 ******/
/******* PAGE: PORTFOLIO - 3 column layout ******/
gallery li {
width: 28.3333%;
}
gallery li:nth-child(3n+1) {
clear: left;
} }
@media screen and (min-width: 660px) {
}
Index.html --> See https://github.com/sohum42/index.html/blob/master/README.md
If you need any other code, please let me know. Thank you for your help.
Sohum Sanghvi
2,995 PointsI was able to fix the problem anyways. It turns out I forgot to put the end bracket of @media screen and (min-width: 480px) at the end of the code. Thank you anyways.
Also, for future reference, how do I enter in the HTML and CSS so it's easy for you to read? Is there some text editor I should use? Because when I copy and paste directly from the workspace, there is usually some formatting issues.
Jason Anello
Courses Plus Student 94,610 PointsGlad you figured it out. In your posted css it does look like you have properly closed off the first media query. I see two closing braces right before the 660px media query. One to close off the :nth-child rule and another to close off the media query. So I'm not sure what happened there but it is hard to spot syntax errors sometimes when the code isn't posted properly.
Here's a thread on how to post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum
1 Answer
Isaac Asante
4,752 PointsSimple question... Are you sure you are selecting the gallery IDs using the hashtag symbol like this #gallery? Your code doesn't show that...
Sohum Sanghvi
2,995 PointsI did select #gallery, but my code doesn't show it for some reason. Thank you for your help anyways.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Sohum,
Can you post your css relating to the gallery from main.css?
Also, the way you've posted your html in github we can't see all your actual html as far as I can tell.
If the 2 column layout was working then it's unlikely to be an html problem. So don't worry about your html for now.