I'm currently working on my portfolio website. It has been complete for a while now but I can't seem to figure out why iPhones (Safari) ignores a section's height. I am referring to the section called "Hero Banner" which looks perfectly fine/normal on android phones, but the section's height does not follow the CSS I have for it on iPhones as it becomes very long. This only happens on the mobile layout for iPhones using safari. Desktop and tablet layouts look perfect on all browsers, and the mobile layout on Android looks perfect as well. This problem only shows up on iPhones for some reason.
I have tried tinkering with the min-height, max-height, minifying HTML, and a few other things but can't seem to make this work. Am I missing something here? (I obviously am, just can't seem to figure it out)
Any help will be much appreciated: https://preview.webflow.com/preview/jordans-portfolio?preview=1a419e7ff6d8880ac3e8d8cbc8a229ae