Streaming live at 10am (PST)

How to make link block in grid expand horizontally AND vertically for responsive web?

Hello Webflow Community,

I am building a portfolio website and I am having trouble with making it responsive. I have link blocks in a grid and my thumbnail images as the link block’s background. When I view the page on a larger screen (I have a MacBook 15"), the link blocks only expand horizontally, but I need them to also expand vertically so that my image can stay proportionate.

Can someone please help you? I have spent hours trying to figure this out.

How the images should look:

How they appear on widescreen:


Here is my site Read-Only:

https://preview.webflow.com/preview/lilian-pham?utm_medium=preview_link&utm_source=dashboard&utm_content=lilian-pham&preview=e79080865722d79a822516f2f371d24a&mode=preview

Hi there Lilian, welcome back to the forum :webflow_heart:

You can try this method:
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Or give the images width & height size relatively to one dimension
(eg: width: 30vw, height: 25vw)

1 Like