Streaming live at 10am (PST)

Flexbox Issue on iOS devices - Sticky Footer


#1

Goal: Fixed-to-a-point footer, on all devices, iOS included.

The website works on everything except an iPhone (both on Safari and Chrome). I've removed the flexbox and it wasn't an issue on iOS anymore (which is why I think it's a flexbox issue, and based off searching here), but when I tried to get my footer to stay at the bottom, the way I have it now, it went all screwy and I cannot, for the life of me, get it to work this way without the flexbox.

What I am trying to achieve is for the footer to stay fixed to the bottom, and if I were to resize the height of my browser window, for the footer to adjust, but to stop short of whatever content I have, as is the case with the linked preview, as opposed to overlapping entirely over my main content. This happens if I remove the flexbox and simply go with a fixed footer.

https://preview.webflow.com/preview/bashs-first-site-f74bea158163f030ef41dd?preview=d1f0026e3790bbd7b6c087ce3048b802

Any help would be greatly appreciated.

Thank you.


#2

Hi, @kraig

Could you explain what exactly you mean when you say:

Regards,
Anna


#3

Hey @sabanna,

I must apologise. In trying to limit what I show, I removed a variety of the client's content, and changed what I could. I didn't realise that this in the end adjusted the design more than I had imagined. So I've provided the appropriate link with a working example of the problem below:

In essence, when on iOS devices, the footer overlaps with the main body of content; in this case, the main paragraph you see. On Android and on chrome/firefox (I have yet to try it on Safari yet), the website is working as intended.

A screenshot from an iPhone 5S:

Thank you for looking into this problem; I know I have a rather roundabout/unorthodox way of going about the designing this website.


#4

Ok, I think I got what is wrong.

You keep "flexParent" height: 100vh on all devices. If you will change it to auto and set min-height: 100vh instead, it should help.

Regards,
Anna


#5

@Sabanna, you're a God-send, thank you!


#6

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