I’m sure I’m just misunderstanding how to apply this element. Could someone set me straight on how to size site-container to vertically fit the viewport?
It is setting the height, but the content within the div is too large for it to work (add an overflow:scroll to see what I mean)
The problem is the images are hard coded heights and there just isn’t enough space available… For it to work, you’re going to need to revisit how you’re presenting your images (and making your logo responsive would help as well)
For example, you could add height: 20vh; min-height: 127px; max-height:254px; to your logo class and your logo is now responsive
Your images is are a bit trickier since you’re filling space full width there, so play with those to find where you want them to go.
was telling the height of the image to remain in proper ratio to the width and that I wasn’t forcing a certain height for any of them. Am I understanding that incorrectly? Is it the max-height that is coming into play?
Actually, it’s the width of your photos and your logo that’s causing you the issues. You’ve set the width to 100% of the available size, and to set the height accordingly. Unfortunately for you, that means your height is almost always going to hit the max height. Anything over 1200px wide (which is almost nothing nowadays), and your images are all 537px tall. So you’ve got the 537px for your 2x pictures, 253px for your ring image and 254px for your logo (minimum - that grows as your viewport widens), 22px for your menu, and you’re at 1000 already before you even add in margins and padding.
It has to be that structure and you can’t add divs outside .wrap.
I haven’t done the media queries but you should get the picture with the above. Just take the code and view it in your browsers to see how it looks as the urls are absolute so it will work as long as you are online.
Once you see how it works you may indeed think that the version you have already shows the images off to better effect but of course that’s a design choice.