Search code examples
cssresponsive-designmobile-safari

Flex box layouts and Safari Mobile

Good afternoon,

I'm trying to re-arrange the footer a bit on this website, for mobile : https://staging.theenergyyear.com/

On all other browsers, it currently looks like this :

FF Dev console preview

However, on Safari mobile, it currently looks like this :

Safari Mobile

I'd like for it to look like on the other browsers, however, I'm not really even sure what's going on here and I don't have access to iDevices to look for myself.

The footer mobile css is fairly basic :

@media screen and (max-width: 767px) {
#footer {
        margin: 0 5% 50px;
        /*re-build the menu box as a flex box instead of block*/
        .menu-footer {
            display: flex;
            float: unset;
            width: 100%;
            /*rebuild the list as a flex box instead of block*/
            ul {
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                column-gap: 15px;
                row-gap: 15px;
                width: 95%;
                margin-top: 25px;
                li {
                    margin-right: 0; /*undoing the margin*/
                }
            }
        }
    }
}

I checked on canIuse.com to see if any of the properties I use are problematic on Safari and everything seems to be supported for a while now, so vendor prefixes would do nothing. Can someone with more experience with Safari give me a helping hand?

Thank you!

Solution

  • Well, I figured it out eventually...

    The problem was that particular version of Safari wasn't supporting nested CSS so I had to unwind it.