Media Query Breakpoints

  • Resolved baz101

    (@baz101)


    4 years, 1 month ago

    Hi,

    I’m testing GB on a local installation with Genesis + latest sample theme. I’m trying to change the breakpoint for the 3 column block to switch to single columns @768px instead of @600px.

    @media only screen and (max-width: 768px)
.gb-layout-columns-3>.gb-layout-column-wrap.gb-is-responsive-column {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "col1"
        "col2"
        "col3";
}

    I have tried to copy this code to style.css, and front-end.css, but it’s still being overruled by Genesis Blocks. Can you please suggest any other way to achieve this?

    Thank you.

    • This topic was modified 4 years, 1 month ago by baz101.
Viewing 3 replies - 1 through 3 (of 3 total)

  • @baz101 Found a couple of small issues with your CSS. I was able to get it to work with the following:

    
@media only screen and (max-width: 768px) {
    .gb-layout-columns-3 > .gb-layout-column-wrap.gb-is-responsive-column {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "col1"
            "col2"
            "col3";
    }
}
    Thread Starter baz101

    (@baz101)

    Thanks Luke, it works!

    Looks like I forgot to add the additional ‘{}’ in my media query – Doh!!!

    Luke Carbis

    (@lukecarbis)

    Happy to help mate!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Media Query Breakpoints’ is closed to new replies.