remove small gap between product name and price - product card

Store Design
, ,

Topic summary

A user seeks to reduce the vertical spacing between product names and prices on their product cards. The site uses the Dawn theme.

Two CSS solutions were provided:

  1. Method 1 (LizHoang): Add code to the base.css file:

    .card-information {
    margin-top: -4px !important;
}

  2. Method 2 (DaisyVo): Add code via Theme Settings > Custom CSS:

    .card__heading .card-information {
    margin-top: -3px !important;
}

Both approaches use negative top margins to close the gap. Screenshots demonstrate the expected results. The discussion remains open with no confirmation from the original poster about which solution was implemented or whether the issue was resolved.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

hello, i would like to remove the small gap between my product name and price for my product card:

Screenshot 2025-03-05 at 22.42.16.png
Screenshot 2025-03-05 at 22.42.16.png756×173 8.18 KB

my website is www.alexandrawestbrook.com , theme is dawn

2

Hi @ads18922

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.card-information {
    margin-top: -4px !important;
}

Result

LizHoang_0-1741224547387.png
LizHoang_0-1741224547387.png484×140 24.9 KB

Best,

Liz

3

HI @ads18922

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.card__heading .card-information {
    margin-top: -3px !important;
}

Here is the result:

image_720.png
image_720.png720×450 201 KB

I hope this helps

Best,

Daisy