iOS inconsistancy

I’m about to run out of hair to pull out.

My Navbar doesn’t display correctly on iphone landscape as it does on other devices. I have no way to go into dev to source issue because I don’t have an iphone. Site displays correctly on all other devices, mobile and otherwise (to my knowledge) but on iphone the navbar looks like this

instead of:

The site is published at www.lifecentre.capetown

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Thank you, sorry I was in a panic and did the forum no no of skipping over reading the newcomer guides.

The read only link is now active

I fixed this by manually setting the desired height of the div instead of leaving it to auto.

Consider this case closed. Although I would like to know why iOS treated this differently to other browsers/platforms

Yeah, Apple doesn’t like auto. I had all sorts of design issues, especially when I started to use grid a lot, in plenty of cases, safari and iOS couldn’t resolve height when set in auto. Sometimes Z-indexing is also finicky in Safari / iOS.

Long live chromium !

Yep, was still giving issues on some pages, so I set as many things to fixed heights as possible in the nav bar and it worked itself out. good to know it wasn’t me doing something drastically wrong. Got a happy client now, and an empty bank account, so will be good to get paid :stuck_out_tongue:

If you don’t have iDevices lying around, I find that web app very useful for checking visually at least. https://appetize.io/

Thank you, that will be very helpful I’m sure :slight_smile:

1 Like