How to reduce gap between product pictures and title?

Topic summary

Issue: Excessive vertical gap between product images and titles on a collection page in the Trade theme.

Key fixes proposed (CSS changes):

  • Edit assets/component-card.css and set .card__information { padding-top: 0; padding-bottom: 0; } to reduce spacing.
  • In base.css, set .card__information and .card__content to padding-bottom: 0px !important (shared selector shows “.card_ _content,” likely intended as “.card__content”).
  • Inject a block in theme.liquid (before ) that, on mobile (max-width: 767px), sets .card__information { padding: 0 1rem !important; } and .card__content { padding-top: 7px; padding-bottom: 0; } (post shows “c ard__content” typo).
  • Another reply suggests adding code above in theme.liquid; the actual snippet is missing, but a screenshot shows reduced spacing.

Context and terms:

  • CSS controls visual spacing; theme.liquid is a Shopify template where styles can be injected; “card” refers to product tiles.

Assets central to understanding:

  • Multiple screenshots show before/after; code snippets are essential.

Status: No confirmation from the original poster; no marked solution. Discussion remains open.

Summarized with AI on December 24. AI used: gpt-5.

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.

  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;
}

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 tag:


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 :heart_eyes:

1 Like
  • 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.

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 on theme.liquid

@media screen and (max-width: 767px) { .card__information { padding: 0 1rem !important; } .card__content { padding-top: 7px !important; padding-bottom: 0!important ; } }

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