remove distance between product title and price - product card

[ads18922]

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

this is my website, as you can see there is a small gap between the title and price. This is what i want it to look like:

where there is no gap.

my website is www.antico-abito.com , theme is dawn

[rajweb]

Hey @ads18922 ,

To remove the small gap between the product title and the product price on your product cards in the Dawn theme, you can add some custom CSS. Here’s how to do it:

Follow these Steps:

1. Online Store

2. Themes

3. Edit code

4. Open the file base.css (found under Assets) or theme.css if you’re editing the code directly.

Add the following CSS:

.card__information {
  display: flex;
  flex-direction: column; /* Ensure elements stack vertically */
  gap: 0; /* Remove any gap between title and price */
}

.card__heading {
  margin-bottom: 0; /* Remove space below the title */
}

.card-information .price {
  margin-top: 0; /* Remove space above the price */
  padding-top: 0; /* Remove any additional padding */
}

.price__container {
  margin: 0; /* Ensure no margin inside the price container */
}

Result:

After saving, reload your website to see the changes. The product title and price should now be directly adjacent to each other without a gap.

Let me know how it looks!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[ads18922]

hello, just added this code and nothing has changed.

[Dan-From-Ryviu]

Please add this code to Custom CSS in Online store > Themes > Customize > Theme settings

.card-information>.price { margin-top: 0px !important; }