Adjust spacing of heading text to images for featured collection

[bradleymatthews]

Hi, just need some code I can paste into I assume base.css to reduce these gaps between the main heading text of these two featured collection blocks and the product images within each on my home page. The images have white backgrounds but they are 4:3 and there is still a gap shown by the red annotations.

Theme: Trade

BM Print Shop

Would greatly appreciate it!

[bradleymatthews]

Thanks, I know its not caused by the white backgrounds, just was stating to illustrate the gap. How can I tell what section wrapper is adding the space?

[Zuhairan-Raydan]

@Mary_solutions how do you know if it’s gonna fix the issues if it’s from AI, and kindly paste it here.

[bradleymatthews]

Didn’t work. I already tried with chatgpt back and forth for half an hour and got no where which is why I’ve come to here.

[Zuhairan-Raydan]

@Mary_solutions This is a new account ,how can you be trusted

[Zuhairan-Raydan]

@Mary_solutions thanks for understanding

[tim_tairli]

Hi Bradley,

1. Your product images have a lot of air above and below actual picture. Even if you remove all margins this will still look like empty space.
   I’ve added dashed red border on the screenshot below to your images to illustrate this.
   It’s a good idea to crop your product images tighter. However, you can add some CSS code to do it – Add this to the “Custom CSS” setting of this section

.card__inner.ratio {
  --ratio-percent: 60% !important; /* edit to your liking */
}

Before/After:

2. There is some margin on collection title and its wrapper and also at the top of product grid.
   To remove this, use this code in “Custom CSS” setting of this section:

.collection__title, 
.collection__title h2 {
  margin-bottom: 0;
}

.product-grid {
  margin-top: 0;
}

Note that code would not work If you put it elsewhere.
Before/After

[bradleymatthews]

Thanks #2 was exactly what I was asking. Cheers.