Image is broken on bigger screen size how to make responsive for all?

When I view on other desktops from 1920 x 1080 down to mobile its fine but when it is anything bigger it seems to go out of place like this which I took on a 5120 x 2880 screen size

I cant figure out what setting or dimention I have entered that could be causing this help?

It should look like this:

read only link: https://preview.webflow.com/preview/sightsee?utm_medium=preview_link&utm_source=designer&utm_content=sightsee&preview=4da0022679f3748634b142fd7ba88d0a&pageId=5f1968d0a84cb22731d6d403&mode=preview

1 Like

Hi @Kyleleft!

Your Section has a fixed height of 500px on the largest breakpoint. This means the Section will always be 500px and ignore the size of the content inside the Section, in this case, your Image.

To fix this, you’ll want to remove any fixed height from the Section. If you want your Section to respect the content inside and never be shorter than 500px, then you can set the Min H to 500px — this is setting a minimum height on your Section, so it’ll never get shorter than whatever value you put there.

You can see this scenario is taught in the size lesson: https://youtu.be/hyAeX0p-uIA?t=716
If you wanna learn more about CSS sizing, check out the full lesson on Webflow University! Size | Webflow University

Hope this helps! Let us know if this works or if you have any other questions!