Product column spacing

Store Design
1

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

2

Hi @andrewglez ,

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

EBOOST_0-1714978381463.png
EBOOST_0-1714978381463.png930×817 183 KB

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);
	}
}
  1. Replace “80px” with a number that you would like to use

EBOOST_2-1714978610062.png
EBOOST_2-1714978610062.png1268×278 14.4 KB

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

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

EBOOST_1-1714978526774.png
EBOOST_1-1714978526774.png1654×611 73.7 KB

3

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

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly