Overwrite Masonry Layout by having 3 columns on desktop and tablet and 1 in mobile

Hello guys,

hope someone can help me.

I read several of your posts and tried to use the css code to overwrite Masonry layout in my gallery but no luck.

I used this code:

@media screen and (min-width:567px) {
    .masonry-container.sqs-gallery-design-autocolumns{
      display: grid!important;
      grid-template-columns: repeat(3, 1fr) !important;
      grid-column-gap:0px;
       padding: 0px;
    }
   .masonry-container .masonry-item{
        position: absolute!important;
       transform: none!important;
       /* width: 100%!important;*/
       display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .masonry-container .masonry-item .masonry-thumbnail img {
        height: 100%!important;
          width: 100%!important;
    }
} 

But still have 4 columns between 1025 and 1108px and  between 1368 and 1417px.

Thanks,

Tomás

Hi,

Can you share link to page where you use masonry? We can check easier