Streaming live at 10am (PST)

Dictate grid height by specific content?

Hey all!

I am trying to have an image’s height in a grid be dictated by the other content in it; not the image itself. I think screenshots will be easier to understand:

What I want:

What I have on webflow

The content on the right is dynamic (this is ecommerce) and will change depending on the product. Thus I want the content on the right to dictate the height of the entire grid and thus resize the image on the left. Right now the image is dictating everything :frowning:

Any ideas? THANKS ALL

Read me link:
https://preview.webflow.com/preview/memberstack-97e654?utm_medium=preview_link&utm_source=designer&utm_content=memberstack-97e654&preview=55d732a60d507b2b636a3ba5305ae6f4&pageId=6059a5e6dfac3f2f886f0870&itemId=605a1473400c6502cb1162cf&mode=preview

HI @Douglas_Fullerton I can thing only about way that you set hard/exact size to grid (or row)
In your example is element height 570px so after set this height you set image to cover and left content to stretch.

or just use desired image height in this case 570px (so grid will get min-content height from image) and then just set left part to stretch as before.

Yes I was thinking that too, but the issue is that the text on the right is pulled from a CMS: So if for example there is 2 lines of text, the grid would be unnecessarily big if set to a fixed height :confused:

I will continue to play around; there must be way! :slight_smile:

Okay wow I just solved it by luck:
I set the grid to relative and the image to absolute with 100% width and height and fit = cover

Hi @Douglas_Fullerton I’m glad to hear you solved it. I can only add that uneven height based on text content will create inconsistency of element height and image can have really narrow shape not revealing all important things in img. There is nothing wrong with that but it’s just what in UX is good to avoid especially when you present goods in shop but … If this solved your issue please mark any response as solution to close this request. :wink: