Reducing gap between collection image and price

[Regd1]

Hello,

I am using the Shopify Dawn 2.0 theme. I am using the product title as the image in my product collection/ featured product collection. At the moment there is a large gap between the product image and the product price. I would like the gap to be reduced to bring it closer to the price. I have included an example in the below image and arrows to show the space i would like reduced. I have tried multiple things so I would really appreciate support with this.

[GemPages]

Hi @Regd1 ,

Can you give me your page URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

[Ujjaval]

@Regd1 Can you share your store url ?

[Regd1]

@GemPages

https://regdealers-com.myshopify.com

[Regd1]

https://regdealers-com.myshopify.com

[Ollie]

Hey @Regd1 .

Thanks for reaching out.

I appreciate that you have let us know which theme you are using on your online store, that is very helpful! Looking into the Dawn theme, I noticed that reducing the gap between the product image and product price is not available using the Theme Editor. However, you could make a change of coding to the theme to have it displayed as you would like. Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to have our internal team make the changes on your behalf.

If you are interested in using the design time, you will need to login to your store using the Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor.

Let me know if you have any questions.

[Ujjaval]

@Regd1 Put below css into base.css file (0nline store->themes->edit code->assets->base.css)

.card__content {
      padding: 0px !important;
}

For reducing more space you need to crop the image cause image surrounded by white color .

[PageFly-Victor]

Hi @Regd1

This is Victor from PageFly

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

.card__information {

padding: 0 !important;

}

h3.h4.product-title {

margin-bottom: -10px !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[Regd1]

Thanks great, how do I reduce the size at each side of the image?

[PageFly-Victor]

@Regd1

You can try with this code:

.color-background-1.isolate.gradient .grid--4-col-desktop .grid__item {
    max-width: 100% !important;
    width: unset !important;
}
.color-background-1.isolate.gradient .grid__item {
    flex-grow: unset !important;
}

[Regd1]

Once I click into the product how do I reduce the space between the title image and the price? Image attached below

[PageFly-Victor]

HI @Regd1

You can use this code:

h1.product-single__title {
    margin-bottom: 0 !important;
}

[Regd1]

Hi

When I look on the mobile grid version I want the products to be displayed 2 by 2. the 2 products below seem to be too big to do so. Can you help?

[PageFly-Victor]

Hi @Regd1
Please try with this code:

@media screen and (max-width: 767px){
	.card__content {
    padding: 1px !important;
}
}

[Regd1]

Great, how do I get the yellow to match the same size on the top and bottom?

[PageFly-Victor]

@Regd1
You want to look like this?

h3.h4.product-title {
    width: 170px;
}

[Regd1]

How can I made all of the yellow backgrounds the same width regardless of the number of characters on the desktop version? @PageFly-Victor

[Regd1]

@PageFly-Victor are you able to help?

[Regd1]

@PageFly-Victor can you help?

[Lyndajh]

Victor

I wanted to say thank you. It worked perfectly for me in the Spotlight theme.