Other Shopify solution failed - increase space between product title and image

Hello,

I hope someone can help out with what’s probably pretty simple!

I’d like to increase the space between the product title and image on the Debut theme (collection pages etc).

Screenshot below.

I searched for a solution, but adding the suggested code to the theme.liquid and/or theme.css doesn’t work.

Thanks!

@evelynrosew - the spacing there is set up a bit awkward … you could try this (not pretty) as a starting point - works on the unmodified version of the theme:

.product-card__image-wrapper > div:first-child {
  padding-top: 102.5% !important;
}

Hope this helps,
Mario

Hi @r8r ,

Thanks for stepping in!

Where do I add that code? I placed it at the bottom of theme.liquid, then theme.css, but neither changes anything.

Thanks,

Evelyn

@evelynrosew – yes, the quick (and a little dirty) way would be to add it to the end of the file assets/theme.(s)css(.liquid).

It would be a little easier to verify that the code actually does what it should, if you shared a link to the page the initial screenshot was taken from.

Mario

Hi @evelynrosew ,

Please follow these steps:

Step 1: Go to Online store > Themes > Actions > Edit code.

Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
.grid-view-item__image-wrapper{
margin-bottom: 15px !important;
}

Hope it helps!

Please mark as a solution if you find my answer helpful. Thank you and good luck.

Hi Mario,

Sorry for the late reply - I relocated countries recently!

I added the code you suggested to theme.liquid. Here’s a link to the site - maybe you know why the code doesn’t work?

https://dyhbs30xh478f5wy-59127300272.shopifypreview.com

Fingers crossed you can help with this one, as the line spacing issue is preventing me from setting the website live. :disappointed_face:

Thanks,

Evelyn

Evalyn @evelynrosew – go ahead and add the following CSS instead of the initial code:

.grid-view-item__title {
  margin-top: 1rem;
}

Result:

Hope this helps,
Mario