How to change number of columns in Masonry on mobile screen?

Visual Portfolio automatically calculates the responsive columns. You can change it using Custom CSS if you want to customize it.

  1. Open the Custom CSS settings on your gallery block: https://visualportfolio.co/docs/portfolio-blocks/custom-css/
  2. Add the following CSS:
@media screen and (max-width: 787px) {
    selector .vp-portfolio__item-wrap {
        width: 50% !important;
    }
}

This CSS will work for Masonry, Grid, and Tiles and will change the number of columns to 2 on small screens (smaller than 787px).

Was this page helpful?