product column spacing

andrewglez
Visitor
2 0 0

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

Replies 2 (2)

EBOOST
Shopify Partner
863 235 263

Hi @andrewglez ,

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

EBOOST_0-1714978381463.png

 

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

EBOOST_2-1714978610062.png

 

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

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

PageFly-Noah
Shopify Partner
1119 201 221

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.