[Resolved] Blog column breakpoint from 2 to 1 column

Home Forums Support Blog column breakpoint from 2 to 1 column

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #971023
    Pete

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

    #971311
    David
    Staff
    Customer Support

    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.

    #971921
    Pete

    Thanks very much

    #972095
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.