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
Dustin Kehrli
2,694 PointsGallery still has issues with different screen sizes?
At the 8:50 mark in this video (Building a three column layout) when I applied the clear left to the 4th child list item that worked for the screen size of over 480px.
However the problem I noticed is if you minimize the screen to around 327px - 330px the 3rd gallery image will jump?
Do I have to make another media query for this selection to clear left on the third child item, because the 1st gallery description word wraps to 3 lines, where as the 2nd gallery description is only two lines?
How do you keep it all together out all sizes without having to create multiple media queries?
1 Answer
Dustin Kehrli
2,694 PointsYes I am clearing the float on the 4th element. However at that screen size the issue is with the 3rd element and not the 4th.
Not sure why I am avoiding writing multiple queries. I was thinking about what ifs...
What if I run into an issue with weird styling at multiple screen widths? I would have to put in that many more media queries? I was just wondering if there was another way to shorten it up or to guarantee the gallery will also fall to the left. I suppose the only option I have is writing another media query?
I wrote an additional line at the top with this piece of code that fixes my initial issue:
@media screen and (min-width: 327px) and (max-width: 330px) {
#gallery li:nth-child(3n) {
clear:left;
}
}
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsHmm.. maybe tweeking the width a little bit so that it doesn't jump down a line at that width would be better....
It's a little hard to determine without a working the code. If you'd like to do a snap shot and post the link I'd love to look it over with you. Getting columns right is tough sometimes...
Dustin Kehrli
2,694 PointsHere is the link to my Current Workspace
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsI forked that workspace and removed the above mentioned media query and everything worked just fine with the...
#gallery li:nth-child(4n) {
clear: left;
}
in your initail media query
Dustin Kehrli
2,694 PointsCan you get your viewport size down to that level? The only way I could tell what my view port was I had to install a google chrome extension called: Window Resizer. That would show me the view port size. For some reason on my mac I could not get the viewport width below 400px, but on my windows side I can get it below 400px, which is where I see the problem between these pixel widths. 327px - 330px. Maybe the viewport can only go so low depending on your native screen resolution.
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsYeah, i've run into that issue on my mac before as well, but i'm on a PC right now and was able to go past those breakpoints and no issues
Dustin Kehrli
2,694 PointsHere is a screen shot of what I am getting on my screen at home with 1680x1050 monitor with Google Chrome on Windows 7. You can see my view port size in the screenshot. This happens when I comment out my code. Maybe it is just me being too picky. Also I wanted to say thanks for helping me so far.
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsI went back and double checked and even when I use the mobile device mode in Chrome developer tools I am not able to replicate that problem and they only thing I did to the code from your workspace is comment out the media query that was for max-width: 327px... Maybe it has something to do with the extension that you are using.
When you use Chrome developer tools it will give you the screen size and also give you the mobile device mode to test your design in.
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsBrent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsAre you clearing the float on every 4th element inside a media query?
If you are building from Mobile view up to the larger displays then that would be the case... Also, why are you trying to avoid multiple media queries? Using multiple MQ's is what will enable you to create separate layouts for each screen type (mobile, tablet, desktop).