Reduce gap between images and text in Collection List in Dawn Theme

[WenMar]

Hi there,

I’m looking to reduce the gap between the images and text in Collection list. In order to reduce the size of the images I made some modification to the base.css, however, these changes inadvertently altered the layout of the text.

In this post I have included the last segment of code that I added to the base.css. and the screenshot of the collection list.

Despite my attempts to modify the code, I haven’t been able to find a solution. Can anyone help me?

Thank you in advance

[Moeed]

Hey @WenMar

Can you share your Store URL and Password if enabled?

Best Regards,

Moeed

[WenMar]

Hi,

I’m currently still working on the store, but here is the URL: https://comfypeace.store/

Thank you in advance for your help.

[Anshul_arora]

Hello @WenMar ,

I understand you are looking to reduce the distance between collection images and collection names.

With the help of CSS code you have reduced the size between image and name.

Please add the below mentioned code at the bottom of the theme.liquid file before tag and save.

Output -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

[niraj_patel]

Hello @WenMar

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media only screen and (min-width: 749px) { .card--standard .card__inner { max-height: 123px !important; } .card__content { flex-grow: 0 !important; } .card__information { padding-top: 0 !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[WenMar]

Thank you so much

[WenMar]

Thank you so much!