My home page hero has a text+button container and then an image below it. I created a flex container (called Hero Image Container) below the text+button and set it to expand, so it takes up the remainder of the screen. Then, I placed an image (called Hero Image) inside this container and set it to max height of 100%. However, the image does not obey the container’s full height; it just goes over it, expanding the container it’s in. It was not like this about a month ago, and I haven’t touched it since I noticed it today. Wondering if someone can help - perhaps this is how it’s supposed to behave.
Hey @myonke, it would be helpful to see that page rendered on a staging URL so it can be inspected with browser dev tools. Also what browser / device are you experiencing this issue on?
The website is podgiving.com. I am only seeing the issue on MacOS desktop using the latest Chrome (cleared cache and in incognito), but not on Safari desktop. I’ve attached the differences below.
Thanks @webdev. I did remove this, but this allows my hero section to be as big as the image allows. The image appears just as big, but now you can see the entire image. Whereas on the Safari image above (the correct layout), the image is confined to the correct height.
Are you suggesting the height of the “Hero Section” is the issue and the site is behaving normally? If so, do you know why Safari and Chrome are interpreting the image differently?
Circling back. You could also just give the image container(“hero-image-container”) a max-width right? Say 750px;
The image is not constrained but the Hero Section does constrain the height. Safari is calculating the width of the image to 746.64 pixels. I don’t have time to debug webkit nor chrome for you, sorry.
Hi @webdev - I could give the image container a max width, but then it’s no longer responsive to screen sizes. Thanks for the help, but I still think there is a different underlying issue, especially since it’s only happening on Chrome. I reached out to @webflow, but i Haven’t heard back yet.
