Hi,
You are missing the point a little and although www.colly.com does act responsively it is effectively a series of fixed width designs which is ultimately more work than it should be.
If you had copied the code I gave you exactly your design would automatically have scaled throughout the whole range without overlap. I made sure that your images scaled down with the screen size so that you don’t get any overlap as in your current attempt and then at suitable breakpoints I changed the percentages around to change the column numbers to suit. It makes for a much smoother experience and caters for all without trying too hard.
You can’t have any fixed widths greater than your breakpoints because then its not responsive and indeed mobile devices will shrink your layout to accommodate the large element thus breaking the mobile view completely.
I’m not sure what you are doing with all those images anyway as they should simply be in a list and not nested sections ( a section denotes a new section not a single element). You also seemed to have grouped 4 images at a time which makes it awkward (impossible) to get three across.
Just use a simple linear list.
<ul>
<li><img></li>
<li><img></li>
etc…
Then you can allow them to wrap into whatever width is available.
For example if you hadn’t grouped your design then you could use code like this to create 4,3,2,1 columns as the width gets smaller.
@media screen and (max-width:1080px) {
.section,header {width:800px}
.col.span_1_of_4{
width:30%;
float:none;
display:inline-block;
vertical-align:top;
margin:0 10px 10px;
}
}
@media screen and (max-width:800px) {
.section,header {width:580px}
.col.span_1_of_4{
width:45%;
}
}
@media screen and (max-width:580px) {
.section,header {width:auto}
.col.span_1_of_4{
width:250px;
}
}
So what this code is doing is that as it nears your width of 1080px it reduces the wrapper widths to a size that will accommodate 3 across and then changes the width of each item so that only 3 fit in a row. The same thing happens as the screen gets smaller and approaches the new width it then triggers another change in the wrappers width and resizes the items so that only 2 will fit across and so on… This is what I meant when I said you are basically just creating a series of fixed widths unlike the more fluid approach in my first example.
So to recap:
If you want fixed widths then you must do this:
Say your default width is 1080px - the you set a media query at 1080px (or 1079px if you don’t want it to break until the actual limit) and in that media query you reduce the widths of any wrappers that have been set to 1080px and you make their new width wide enough to accommodate three of your items across. This means that your span_1_4 must also be set to be a third of the width and not the 25% (approx that it was set before).
Then you just do the same as the screen width approaches this new width (say 800px) then trigger another wrapper width change and an item width change also. Continue until you can only fit one column across.
You will need to reorganise the grouping of those images though because you don’t want nested blocks of 4. Keep it simple and a linear list is less html and easier to manage. (You can group the whole thing in a section if needed.)
