Search code examples
htmlcssgridmedia-queriesbreakpoints

Getting a responsive three column grid to stack to two columns at certain breakpoint

I'm re-building my site a bit, changing a few things and this time am attempting to use some slightly different frameworks including a different CSS grid system - but I have a run into a similar problem I had building my site last time with getting the grid columns containing my portfolio items to stack/collapse properly at a certain screen size/breakpoint.

I have a test page set up here:

http://samnorris.co.nz/test/index.html

Specifically, I am trying to get the three columns containing the hexagon-shaped portfolio div's to stack into two columns (2 items per row) at tablet screen-size.

Last time I achieved this surprisingly rather easily by changing the .work-grid class applied on each of the hexagon divs to from to width: 50% and float: left under a tablet screen-size media query breakpoint (@media only screen and (max-width: 56.25em) or @media only screen and (max-width: 908px) for example)

for example, as so:

@media only screen and (max-width: 908px) {

.work-grid {
    width: 50%;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}

but this doesn't seem to work using the different grid framework I'm using this time (which is Columnal btw, if it matters...there isn't really any documentation for it to speak of at all either) Not sure if it's the way it handles rows differently or if there is simply something else I'm missing, but this is what is happening using the above code:

enter image description here

Can anyone please help me understand what I need to do to get these columns to stack properly from three columns to two at the tablet-size breakpoint? (as they do on my main/current layout for example)

Solution

  • You need to remove the clear property for your .row and clearfit class. Update your CSS like below.

    @media only screen and (max-width: 908px) {
.work-grid {
width: 50%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
}
.clearleft, .row
 {
   clear:none !important;
 }
}