Макеты Flex Box и Safari Mobile ⇐ CSS

[Anonymous]

Добрый день!
Я пытаюсь немного изменить нижний колонтитул на этом сайте для мобильных устройств: https://staging.theenergyyear.com/
Во всех других браузерах в настоящее время это выглядит так:
[img]https://i.sstatic. net/xFpWfUOi.png[/img]

Однако в мобильном Safari в настоящее время это выглядит так:


Мне бы хотелось, чтобы он выглядел так же, как в других браузерах, однако я не действительно даже понимаю, что здесь происходит, и у меня нет доступа к iDevices, чтобы искать самому.
Css для мобильных устройств нижнего колонтитула довольно простой:

Код: Выделить всё

@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*/
}
}
}
}
}

Я проверил на canIuse.com, не являются ли какие-либо свойства, которые я использую, проблематичными в Safari, и кажется, что уже некоторое время все поддерживается, поэтому префиксы поставщиков ничего не дадут. Может ли кто-нибудь с большим опытом работы с Safari помочь мне?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/784 ... ari-mobile