Jump to content

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

Recommended Posts

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) {
      display: grid!important;
      grid-template-columns: repeat(3, 1fr) !important;
       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.



Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.