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 :
However, on Safari mobile, it currently looks like this :
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!
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.