Jump to content

Reduce space between product images

Recommended Posts

  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply
Posted

Add the following to Design > Custom CSS.

@media screen and ( min-width: 768px ) {

  .products.collection-content-wrapper .list-grid {
  
    grid-column-gap: 0;
    column-gap: 0;
    grid-row-gap: 0;
    
    }
  }

@media screen and ( max-width: 767px ) {

  .products.collection-content-wrapper .grid-item {
  
    margin-bottom: 0;
    
    }
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
12 minutes ago, creedon said:

Add the following to Design > Custom CSS.


@media screen and ( min-width: 768px ) {

  .products.collection-content-wrapper .list-grid {
  
    grid-column-gap: 0;
    column-gap: 0;
    grid-row-gap: 0;
    
    }
  }

Let us know how it goes.

 

Thank you @creedon, this made me happy! Your code work as always.

Last thing, you also help me the code to apply the same effect on mobile? I tried the code below but it didn't work 😅

@media only screen and (max-width: 600px) {

  .products.collection-content-wrapper .list-grid {
  
    grid-column-gap: 0;
    column-gap: 0;
    grid-row-gap: 0;
    
    }
  }

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.