Change number of masonry columns based on screen size?

  • Resolved tmgdesigns

    (@tmgdesigns)


    4 years, 7 months ago

    Hi. Is there any way to change the number of columns in the masonry view based on screen size. I’d like to show 3 columns for large screens, 2 columns for tablets and 1 column for phones. Right now I have my view set to 3 columns. Looks good on large screens, and does change to 1 column for phones, but it looks like 3 badly smushed columns on my tablet…. Thanks for your help!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @tmgdesigns,

    Please add this code in Appearance > Customize > Additional CSS to switch to 2 columns on tablet:

    @media only screen and (min-width: 480px) and (max-width: 769px){
.strong-masonry.columns-3 .wpmtst-testimonial, .strong-masonry.columns-3 .grid-sizer {
    width: 48%;
}
}

    Warmly,
    Mihaela

    Thread Starter tmgdesigns

    (@tmgdesigns)

    Thanks Mihaela, that works great! And thanks for the very quick response!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change number of masonry columns based on screen size?’ is closed to new replies.