[Resolved] Blog column breakpoint from 2 to 1 column

[Pete]

How can I delay/change when the 3 columns break into 2, and, 2 columns break in to 1 column?

[David]

Hi there,

you can use some CSS like so:

@media (min-width:900px) {
    .grid-33 {
        float: left;
        width: 33.33333%
    }
}

@media (min-width:420px) and (max-width:899px) {
    .tablet-grid-50 {
        float: left;
        width: 50%
    }
}

@media (max-width:419px) {
    .mobile-grid-100 {
        clear: both;
        width: 100%
    }
}

This will keep three columns when the screen is 900px wide, tablet between 420px and 899px and mobile at 419px. Adjust each value to suit where you want the breakpoints to change.

[Pete]

Thanks very much

[David]

You’re welcome

[Author]

Posts