Community forum for knowledge and support

Updated 3 months ago

Header 76 and image container height

At a glance

The community member is struggling to get Header 76 to adapt to images of different heights. They are unable to get the image containers to adjust to the image inside and the rest of the column accordingly. A community member suggests removing the image wrapper div and resetting the position absolute, or referring to the padding top CSS hack to create ratios for the image UI elements. The second community member confirms that the suggested solution worked perfectly.

Useful resources

Hey all! I'm struggling to get Header 76 to leverage images of different heights. I can't figure out how to get each image container to adapt to the image inside of it and adjust the rest of the column accordingly. Any help would be much appreciated!

M
T
2 comments

this might throw off the timing of the loop so it might not be worth it but if you at least wanted to adjust the ratio there's a way to do that as well.

But to do what you want to do, essentially just remove the image wrapper div and then reset the position absolute and you should be good.

The other way to do this would be to refer to the values within our image UI elements - its using the padding top CSS hack to create these ratios and they are something like 33.3%, 56.6%, 66.6%, 100% and 120%.

https://www.relume.io/ui-elements?ui-elements-categories=images

Attachments
image.png
image.png

Thanks ! This worked perfectly.

Add a reply
Sign up and join the conversation on Slack