Sections look MUCH different on iOS devices vs Android/Windows devices... Why?

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

@Waldo
@thesergie
@cyberdave

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)

Unfortunately this did not change anything. Any other suggestions?

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.

@Waldo

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!

Hi @Waldo

Here some some screen shots from an iPhone 6S, 6s+ and Galaxy S6.

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!

Hey @Waldo, sorry to bug you.

Any news on why this is happening?

Here’s what I’m seeing on iPhone 6s and iPhone 6s Plus when visiting www.brooksportfolio.com:

We’re trying to figure out why the banner height is different on iPhones but displays correctly on android devices.

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.

I see the min height as “auto” in mobile view. I don’t understand why this looks correct on android devices but not iOS.

So what are you suggesting that will fix this?

Can you set your min to 450px and publish again to www.brooksportfolio.com?

Edit: 450px min-height on mobile portrait for hero-banner.

Done. Please confirm.

This is now how the hero section looks on the 6s Plus:

Embarrassing how I couldn’t figure out that it was just the wrong min-height… Thanks McGuire, your help is much appreciated.

Want to help me out with another issue? :stuck_out_tongue:

http://forum.webflow.com/t/i-have-my-tab-animation-set-up-exactly-as-the-tutorial-video-but-cant-seem-to-get-it-to-close-properly/24861

(Not a problem if you don’t have time - Thanks again for solving my banner height issue. :smile:)

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.

Ah, got it. I’ll look out for that in the future. Thank you so much for your help. Once again, much appreciated!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.