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
James Hallett
6,605 Points3rd image pushed to the middle/left between 410-480px?
The 3rd image is pushed on its own on the 3rd row but only between 410-480px. Otherwise it works fine. Any ideas?
3 Answers
Steven Parker
231,269 PointsThe float clearing that keeps the 3 columns neat in the above-480 media query has no counterpart to clear for 2 columns in the smaller size. But you could easily add it:
@media screen and (max-width: 479px) {
#gallery li:nth-child(2n + 1) {
clear: left;
}
}
I actually had to use a setting of 480px to make this work completely, but perhaps my browser is just buggy.
Jason Anello
Courses Plus Student 94,610 PointsIf you're going to put that into a media query then the max-width should be 479px. Otherwise, it overlaps with the min-width: 480px media query.
So at 480px, both media queries would apply and you would be clearing both the "2n + 1" and the "3n + 1" items, leading to an incorrect layout.
Steven Parker
231,269 PointsI was supersized by the need to use 480 here myself. I actually tried this first at 479, but I found my Chrome browser did not apply the setting until the size was reduced to 478. At exactly 479 it did not apply either setting so I raised it to 480, where it seemed to work as intended.
I totally agree that in theory, and perhaps in a different (or just current) browser, 479 would be the correct value.
Jason Anello
Courses Plus Student 94,610 PointsI wouldn't say in "theory". This is how it's supposed to work based on the specification. If you have a max-width: 480px media query and another min-width: 480px media query then a browser should apply both media queries when the viewport is exactly 480px. It would be considered a bug if the browser didn't do this.
If you're using chrome's dev tools to test the width at 480, or 479 then you may be getting misleading results. This project doesn't yet have the meta viewport tag added to it which happens in the next video I believe. So chrome is treating it as a desktop site and may not be applying the media queries as you would expect.
However, if you don't use dev tools and just resize the browser window to a viewport width of 480px then you'll see that the layout is broken.
Both firefox and chrome are behaving exactly the same when I test it.
Steven Parker
231,269 PointsI was just resizing the browser and needed 480 for it to work at all sizes. But I agree, it's probably a total anomaly in my version (I'm not using the latest). I'm sure there's no bug like this in current browsers.
Jason Anello
Courses Plus Student 94,610 PointsHow old of a version are you using that it doesn't use min-width and max-width properly?
I don't believe that there is a bug in chrome with those 2 properties. When I resize the browser to exactly 480px, I get a broken layout.
James Hallett
6,605 PointsThanks!! Definitely should have thought of that :) Surprised they missed that in the videos...
Thanks for the help...
James Hallett
6,605 PointsMakes sense cheers...
Steven Parker
231,269 PointsSteven Parker
231,269 PointsTo facilitate analysis, make a snapshot of your workspace and post the link to it here.