Reducing height of caption overlay of an image

Site URL: https://www.nourishedbaby.com.au/

Hi, 

I'm having trouble adjusting the height of the caption overlay on my image block. I would like it to be as low as possible on the bottom so you can see most the picture. As you can see it really takes over on the mobile view.

It affects my home page and recipes page:

https://www.nourishedbaby.com.au/

https://www.nourishedbaby.com.au/recipes

Add to Design > Custom CSS

/* Inline blocks overlay */
.design-layout-inline .image-caption-wrapper {
    padding: 0 !important;
}
.design-layout-inline .image-caption-wrapper h2 {
    margin-top: 5px;
    margin-bottom: 5px;
}

Thanks so much! works perfectly 😄

On 1/11/2021 at 9:12 AM, Nourishedbaby said:

Thanks so much! works perfectly 😄

On tablet, doesnt look good. Do you want to reduce text size?

and this, text narrow, tablet

https://www.nourishedbaby.com.au/blog/do-i-need-to-introduce-low-allergen-foods-one-by-one

and this, mobile, pagination seems big.

If you need to solve these,let me know. We will give the solution.