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
MAHENDRA CHARRAN
1,605 PointsI was able to get my 3 column but when I try to see it on mobile view, it doesn't go back to two columns.
It shows 3 columns. When I enter the #gallery li:nth-child(4n) { clear: left; } code, that's where it goes back to 3 columns even in the snaller windows. Here is my snapshop https://w.trhou.se/2mgkqew32a
1 Answer
Milad The Computer Guy
20,287 PointsHi Mahendra, in your responsive.css file, just simply put:
#gallery li {
width: 28.3333%;
}
gallery li:nth-child(4n) {
clear: left; }
inside the second media query (@media screen and (min-width: 660px) {
}), the code above is not inside any media queries, thats why.
MAHENDRA CHARRAN
1,605 PointsMAHENDRA CHARRAN
1,605 PointsAwesome. Thank you! I tried putting it at the bottom of the media query but not inside. I should have looked at my first media query for an example, anyways thank you again!
MAHENDRA CHARRAN
1,605 PointsMAHENDRA CHARRAN
1,605 PointsWhy does it work for the instructor in the video tho?
Milad The Computer Guy
20,287 PointsMilad The Computer Guy
20,287 Pointsbecause in his, that code is inside the first media query which is targeting 480px and bigger. take a closer look at where he closed his curly brace } for the first media query in the video