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)
Hey @TriceWD could you try the following, force the styles within mobile which are currently set to be inherited?
Maybe also perform a force save once you’ve made the changes (cmd+s on mac or ctrl+s on windows machines within the Webflow Designer)
By re-sizing your browser, you can see that weird things start to happen between the mobile and tablet breakpoints, but I don’t have any CSS markup for the phone-landscape breakpoint. I’m unsure why any of this is happening.
Hey @TriceWD could you please try publishing the site and sending me a live page link for me to take a look? Also can you please post some screen shots of the behavior you’re seeing? Thanks in advance!
I have also published the project, but the exported files without the forced styles can be found at: www.brooksportfolio.com
With the forced styles you can find the exported site at: www.tricelivedemo/bp
The published project can be found at jordans-portfolio.webflow.io
Thanks for looking into this @Waldo, much appreciated!
The top hero section, dubbed “herobanner” in your CSS, has some very bizarre settings that conflict with each other.
For everything other than desktop, you’re inheriting the minimum height of 700px, and the maximum height of 900px. That makes sense for desktop since you’re using 100vh, but it really starts messing with things in mobile portrait.
You have a new height of 450px, a max height of 450px (this is irrelevant and isn’t helping you), and an inherited minimum height of 700px.
iPhone is using your minimum value (700px) to override any other height settings for the section.
No problem–these little things are a pain. Browsers tend to prioritize different CSS elements over others when rendering page elements, which is why it looked okay on Android or and not on iOS.