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 trialBreon Waters II
4,076 PointsIssues with showing 2 and 3 column layout
I followed along with the video but my media queries aren't working properly. For the gallery images, it's showing the 3 column look no matter the browser width. Also, the changes for the header at larger sizes isn't taking effect either.
I'm sure it's something small that I'm overlooking.
Any help or suggestions would be greatly appreciated.
5 Answers
nostrodev
7,067 Pointsuser this @media screen and (min-width:480px) { #gallery { width:30%; } }
nostrodev
7,067 Pointsuse this like for the gallery if you want for the mobile website 2 column @media screen and (min-width:480px) { #gallery li { width:45%; } }
Breon Waters II
4,076 PointsThanks for replying Nostro Dev.
When I made the #gallery li width 45% it changed the layout to 2 column for mobile but it keeps it as 2 columns for every browser size. Do you know how I can get 2 columns just for mobile and have it switch to 3 columns for larger sizes?
Breon Waters II
4,076 PointsThanks Nostro Dev
Breon Waters II
4,076 PointsMy CSS wasn't working properly because I had an extra closing bracket for # secretary it looked like this:
#secondary { width: 40%; float: right; }
)
Thanks for taking the time to help Nostro Dev!