Is there a way to set a Div's height as responsive to the content?

Hi there,

Firstly - apologies for the way I’m describing this - it’s difficult for me to articulate.

I have a grid section on my site, to essentially create two columns of content - in the first column is an image with a RTB beneath and to the right is a card with some text in, some of which is conditional content.

Essentially, I have set the BG colour of the Div block on the right, but this is currently appearing as the same height as the column before as it’s set up as a Gird. However, given some of the content is conditional, I’d love for the BG/Div height to be responsive to the content instead of being fixed.

I’ve attached a read-only link below as I’m aware I’ve perhaps done a botch-job of describing this, but if anybody understands, I’d greatly appreciate your help:

https://preview.webflow.com/preview/filey-cat-rescue?utm_medium=preview_link&utm_source=designer&utm_content=filey-cat-rescue&preview=2cdb6c6a00b72ed092221624256e6625&pageId=6242d7e5bcaea7c7d9494aff&itemId=6242d7e5bcaea7d5dc494b87&workflow=preview

Thanks in advance!

Changing the Grid’s align setting to top instead of stretch, should give you the result you want. :slight_smile:

Wow, such a quick fix - thank you so much!

My final question is at the top of the screen where we have text that reads: HELLO, MY NAME IS: [NAME] - at present, there’s a bottom border that spans the full width of the Div to act as an underline to the name, but the ideal scenario is that this would be the width of the name, not the entire div, and respond to each different CMS entry - is this possible?

Many thanks,

Tom

Hi Tom!

if you set the Cat Name’s container to Flexbox - Align: center, the cat name will be as wide as the name and so will the underline.

:slight_smile:

Hi Maria, thank you - I’ve just gone in and made those changes, but still am not having any luck.

I think it’s because we’re achieving the underline with a border because we want to control the thickness and spacing between the text and the line itself - is there a way to make this work?

Thank you once again :slight_smile:

I tried it in your page and it worked for me. And that’s how I would do it.

Let me check again. Maybe I forgot to include some step :sweat_smile:

https://www.loom.com/share/295c812c7fa842c7a1cc1688c4b62ba7

1 Like

Thank you so, so much - I hope you have a fantastic week ahead!

1 Like

Thank you!!! You too!!!