Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Pjotr Knoester
Pjotr Knoester
5,365 Points

My footer does not stick to bottom on safari (iphone 5)

I just published my first website and I found a flaw that I don't know how to fix. When I open the website (www.mooscatering.nl) on my Iphone5 (using safari), the footer appears between my content instead of at the bottom, below all other content. Here's the link to the code: https://w.trhou.se/s8864mz7bb Does anyone know what I did wrong?

Peter Hatzer
Peter Hatzer
20,837 Points

Hi Pjotr,

You need to use web prefixes for some browsers, that are older and can't support these elements. so you need use -webkit- and -moz- 

nameOfDiv{
display: -webkit-flex; 
display: -moz-flex; 
display: flex}

I hope this helps.

6 Answers

Peter Hatzer
Peter Hatzer
20,837 Points

I had look your code think your content-index is missing this code.

.content-index{flex: 1;}
Pjotr Knoester
Pjotr Knoester
5,365 Points
Pjotr Knoester
Pjotr Knoester
5,365 Points

Hi Peter, Thanks for your answer! So in my case, do I have to add "display: -safari-flex;" to the relevant containers and it should be fixed?

Peter Hatzer
Peter Hatzer
20,837 Points
Peter Hatzer
Peter Hatzer
20,837 Points

Hi Pjotr, No Safari runs off the -webkit- prefix. Here is awesome tool help you with prefixes https://autoprefixer.github.io/ 

div{display: -webkit-flex;}
Pjotr Knoester
Pjotr Knoester
5,365 Points
Pjotr Knoester
Pjotr Knoester
5,365 Points

I used the tool and updated the complete file but it doesn't work yet. I think I might have done something else wrong.

Pjotr Knoester
Pjotr Knoester
5,365 Points
Pjotr Knoester
Pjotr Knoester
5,365 Points

Thanks a lot for the help Peter! It works now. It was the missing "flex: 1;". Made my day ;)

Peter Hatzer
Peter Hatzer
20,837 Points
Peter Hatzer
Peter Hatzer
20,837 Points

Glad I could help :)