It shows the relevant portion of Webflow University’s “Width & Height Units” video that demonstrates how the setting means that the section will “never have a height less than the viewport, but it will still respect the content inside.” I follow this with a similar demonstration of the site I’m working on where I have it also set to 100VH minimum, but in my case, rather than respecting the content inside when I reduce the height of the viewport, it cuts off the bottom of the content, just as if I had set 100VH as the height rather than as the minimum.
This issue is demonstrated on the opening section, both on the home page (where I’m setting the text inside a Grid Element) and on a page called “home-copy” (where I’m setting the text in the photo using Photoshop).
The reason that the section is not respecting the content inside is because its direct child (div container) is set to position absolute. If you set it to auto or relative, the content won’t get cut off.
Sorry @Chuck_Braman, I should have mentioned that on the home-copy page, as the text is part of the background image, the section doesn’t technically have any content inside of it, so there’s nothing to respect. You could get around this by setting the background image to ‘contain’ rather than ‘cover’ but this will mean that you will have ever-increasing borders either side of the image as the viewport height reduces.
Your layout on the homepage is the way to go for sure.
Additionally, text that’s part of an image cannot be read by search engines, so you always want to go with live text (where possible).
As you can probably tell, I’m still pretty deep into the learning phase.
There is a lot I don’t understand when it comes to background photos right now.
One thing I don’t understand is why, when set to cover (which seems like the only practical setting for most design circumstances) they resize down slightly when reducing the window size in the Desktop breakpoint, and then lock in one (large) size all the way down to the smallest mobile portrait viewport breakpoint: Dropbox - File Deleted.
That makes the subject of the photo in this instance, the hands, pretty humungous on phone, and hard to fit the text around.
Would you know why the background images only resize within the desktop breakpoint? It certainly would be handy to be able to have them as background images in “cover” mode, but also resizing down within each of the four breakpoints as they begin to do in the desktop breakpoint.
(I agree that it’s preferable to have the text live rather than embedded in a photo, but it’s quite a challenge to keep it out of the subject of this particular photo in all the viewpoint sizes. I thought that embedding the text in the photo, and then having different size photo/text combinations for different breakpoints might be a solution, but with the photos not resizing within the lower breakpoints at all, that doesn’t work well either…)
Yeah, it all takes a bit of figuring out. So, the reason that a background image set to cover may reduce very slightly and then lock is due to the aspect ratio of the image and the height value set on the element. The cover setting dictates that there will never be any borders around an image - it will always cover the entire element.
In this case, small portions of the top and bottom of the image are being masked in desktop so that it covers the entire width of the screen. Once these portions have been revealed and as the minimum height is 100VH, the image cannot reduce in size any more, otherwise borders would begin to appear top and bottom.
A neat, somewhat counterintuitive tactic to try out on smaller breakpoints is to set the height of the element to VW (Viewport Width). What that means is that the height of the element will scale proportionally with the width of the viewport.
Takes some time to figure out the sweet spot, and it may be different on each breakpoint, but it’s a great way to make your elements responsive and help maintain your layouts. VW can also be used for your font size too.