HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

James Hallett
James Hallett
6,605 Points

3rd 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?

Steven Parker
Steven Parker
172,034 Points

To facilitate analysis, make a snapshot of your workspace and post the link to it here.

3 Answers

Steven Parker
Steven Parker
172,034 Points

The 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.

If 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
Steven Parker
172,034 Points

I 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.

I 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
Steven Parker
172,034 Points

I 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.

How 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
James Hallett
6,605 Points

Thanks!! Definitely should have thought of that :) Surprised they missed that in the videos...

Thanks for the help...

James Hallett
James Hallett
6,605 Points

Makes sense cheers...