product column spacing

[andrewglez]

On desktop my product columns are really close together and I don't know how to fix that issue. Any help would be greatly appreciated. 

My website is https://www.magearmr.com/collections/all

[EBOOST]

Hi @andrewglez ,

I am not sure your request. However if you add spacing between 2 products

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file

@media screen and (min-width: 750px){
	.product-grid-container .collection #product-grid {
		column-gap: 80px;
	}
	
}
@media screen and (min-width: 750px){
	.product-grid-container .collection #product-grid.grid--2-col-desktop .grid__item {
		max-width: calc(50% - 80px / 2);
	}
}

4. Replace "80px" with a number that you would like to use

If you want to expand content you can add code below to end of the file:

body .product-grid-container .collection {
	max-width: 1200px;
}

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
   @media screen and (min-width: 767px){
      .product-grid-container .collection {
           max-width: 1140px !important;
       }
     .product-grid-container .collection .grid {
        display: grid !important;
        column-gap: 90px !important;
        grid-template-columns: auto auto !important; 
        // if you wat show 3 product in 1 line please add more "auto" like this
       // grid-template-columns: auto auto auto !important; 
      }
    .product-grid-container .collection .grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }
  
  }

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly