How to reduce gap between product pictures and title?

[KimGottwald]

I would like to reduce the gaps that are in the red rectangles, is this possible?

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test

Im using the Trade theme.

 

[WalkYourStyle]

1. Go to 'Online Store' -> Themes -> Edit Code

2. Inside the assets folder locate the 'component-card.css' file

3. At the end of the file add this code

.card__information{
  padding-top: 0;
  padding-bottom: 0;
}

[BSSCommerce-HDL · Accepted solution]

Hi @KimGottwald, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.card-wrapper .card__information {
    padding: 0 !important;
}

ul#product-grid {
    row-gap: 0 !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSS-TekLabs]

- Here is the solution for you @KimGottwald 
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.card--card.card--media>.card__content, .card__information {
     padding-bottom: 0px !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[niraj_patel]

Hello @KimGottwald 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
  .card__information {
     padding: 0 1rem !important;
  }
  .card__content {
      padding-top: 7px !important;
      padding-bottom: 0!important ;
  }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution