Add spacing in product cards in the collection page in Mode Theme

Store Design
, ,
1

Hi,

I would like to add some spacing between the product cards in the collection page of my website. Here is the link:

https://comfymint.com/collections/all

I would like the spacing to apply in all the collection category in the website. Please see the screenshot with the arrow.

Add spacing between the product cards on the collection page
Add spacing between the product cards on the collection page1905Ă—810 338 KB

Thank you

1 Like
2

Hi @Oreghustler ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Note: You can adjust value to fit your store

Best regards,

Anthony

3

Hi @Oreghustler

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
product-block.product-block.cc-animate-init.-in.cc-animate-complete {
    padding-left: 15px;
}
4

Hi @Oreghustler

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file → Save

.product-block {

padding-left: 34px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly