Мобильное меню в Safari (мобильные устройства iPhone) ведет себя странно

Question

Я создал меню мобильного гамбургера.Это выглядит хорошо на каждом телефонном устройстве, которое я проверял, но на Safari (особенно на iPhone x и iPhone 6) часть меню не работает.Я пытался работать с медиа-запросами, но это не сработало.Вот исходный HTML-код:

<div class="elementor-widget-wrap">
                <div data-id="da3c1dd" class="elementor-element elementor-element-da3c1dd elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
                <div class="elementor-widget-container">
                    <div class="elementor-spacer">
            <div class="elementor-spacer-inner"></div>
        </div>
                </div>
                </div>
                <div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="regulation-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span></a></h4>       </div>
                </div>
                <div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#mayaaboutmob"><span class="menu-item-text"><span align="center">אודות</span></span></a></h4>       </div>
                </div>
                <div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4>     </div>
                </div>
                <div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4>      </div>
                </div>
                <div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4>       </div>
                </div>
                <section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 column-contact elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><p class="makeSmall" style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;<img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|&nbsp;<span style="color: #001a71;" data-mce-fragment="1">&nbsp;052-6582643</span></label></p></div>
                </div>
                </div>
                <div data-id="3829e8b" class="elementor-element elementor-element-3829e8b elementor-widget elementor-widget-html" data-element_type="html.default">
                <div class="elementor-widget-container">
            <script>
jQuery( document ).ready(function() { 
jQuery('.menu-item-text').on('click',function(){ jQuery('.menu-item-text').removeClass('active'); jQuery(this).addClass('active'); }); 
});

</script>

            </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>
                        </div>

Я ссылаюсь на часть с номером телефона и значками социальных сетей, я присвоил ей идентификатор #mobilemenucontact.

Вот текущий CSS:

@media only screen and (max-width: 375px) {
    .makeSmall { 
        font-size: 95%;
}}
@media only screen and (max-width: 375px) {
.email-mobile {
    width: 28px;
}}
@media only screen and (max-width: 375px) {
.facebook-mobile
{
    width: 28px;
}}

@media only screen and (max-width: 375px) {
.column-contact {
padding: 5px 30px;

}}

Поэтому, кроме попыток медиазапросов, я также попытался установить номер в качестве ссылки href и присвоить самой ссылке «a» атрибут inline-block. Это сделало строку с номером телефона и социальными значками разрывом.и на всех других устройствах.

Когда я проверяю, как это выглядит на iphone, это кажется хорошим, но когда я проверяю устройства iPhone, все становится не так. Вот ссылка в любом случае: www.mayabarber.co.il

Есть идеи, как сделать так, чтобы значки социальных сетей и номер телефона оставались в одной строке в браузере iPhone / мобильном сафари?