reduce space between the picture abd text in the collection

Store Design

Topic summary

A user seeks to reduce the spacing between product images and text in their Shopify collection page.

Issue:

  • Excessive vertical gap between collection images and product text
  • Affects the store at www.mommyandme.online

Solution Provided:
A support response offers Custom CSS code to adjust the spacing:

  1. Navigate to: Shopify → Online store → theme → customize
  2. Access: Settings → Custom CSS
  3. Insert provided CSS targeting .product-grid-image classes

The CSS modifies:

  • Image height properties (height: fit-content)
  • Padding adjustments (padding-top: 170px)
  • Auto height settings for lazy-loaded images

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

WhatsApp Image 2024-12-21 at 2.08.21 PM.jpeg
WhatsApp Image 2024-12-21 at 2.08.21 PM.jpeg720×1280 70.4 KB

2

www.mommyandme.online

3

Hi @kldlaz

You can follow the instruction here :

  1. Go to Shopify > Online store > theme > customize

  2. Click to Settings > Custom CSS > Paste this code to the section and save.

.product-grid-image {
    height: auto !important;
}
.product-grid-image--centered .lazyload__image-wrapper.no-js > div {
    padding-top: 170px !important;
}
.product-grid-image--centered > div {
    height: fit-content !important;
}