Help Forcing CMS Image Height to Stay Above the Fold

Design help CMS
1

Hello Crew,
On my Collection page: ‘Artworks Template’ how can I force all image height to constrain to fit above the fold? (ie. Vertical images require scrolling down to view)
Thanks for the help!

Here is my public share link: https://preview.webflow.com/preview/artisttemplate?preview=a88f9d0a351a5086475cc54dce035c74
(how to access public share link)

2

I also need help constraining the width of the columns containing the work title, media type, and date to be constrained no wider than the image or video. Any help greatly appreciated!

TJ

3

Hi @TJwebflow

You can set a max height of 80-90VH to ensure all images will fit in the view port rather than have to scroll (GIF showing this)

The second question about making the width of the columns equal to the image is a bit trickier. The only solution I can think of is to nest the main image and the row as children of the same parent container. Then set the row width to 100% and if the image width changes, the row should adapt to fit the width of the parent.

Hope this helps!

1 Like
4

Hey @Brando I followed your recommendation. Thanks for that. I’m now having some issues with the image “squishing” in descending screen views. Help!

TJ

5

Hi @TJwebflow

Thanks for following up with this and apologies for the delayed response.

I recommend using Max-height and max-width over setting exact dimensions. This way the image can keep it’s normal ratio but will never exceed the boundaries you set.

Here is a GIF showing this.

You may need to play with the exact vh/vw values set to find what works best for your content. Hope this helps!