FOIT – Flash of Invisible Text Effect

To give it a name for the sake of clarity, the effect is called “Flash of Invisible Text.” This means our text content flashes briefly after the web font has loaded. Of course, the abbreviation sounds better: FOIT (“Flash Of Invisible Text”).

The normal process is that while the font is still loading, text is automatically displayed in the system font after 3 seconds. We can speed this up using the CSS directive font-display: swap;.

However, what is intended for fonts prevents icon fonts from loading correctly—because they have no browser fallback equivalent.

Or read here for more info: https://css-tricks.com/almanac/properties/f/font-display/

if you look the rule:

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont="entypo-fontello"]::before {
  font-family: 'entypo-fontello';
}

you see what is the crux: no fallback Font – so if you swap those icon-fonts – the browser does not know what to show.

here you see the wanted behaviour by swap:

h1 {
  font-family:'opensans-flex',Helvetica,Arial,sans-serif
}

if the browser is still loading the opensans-flex files – it will show your content with Helvetica instead.

EDIT: It is incredibly difficult to transfer the size from the left side of the TinyMCE editor to the preview on the right, depending on the SVG property. And all while preserving the “floating” property.

how did you “when i add a SVG icon to a page,”

if it is an Enfold Element like image or image with hotspot ect. – Enfold actually has CSS rules within avia-builder.css / avia-builder.min.css for these cases.
if you like to influence the preview inside textblock and backend:

you can set via child-theme functions.php that preview size.

function admin_head_mod(){
echo '<style type="text/css">
  .wp-admin .avia_textblock img[src*=".svg"] {width: 80px !important;height: auto !important;}
</style>';
}
add_action('admin_head', 'admin_head_mod');

the point is the even not inline svgs need an absolute dimension ( % and auto will not work )

but:

this part where enfold loads this css for the preview window is inside: class-template-builder.php
there are filters we can use to influence the preview now.

place a file custom-preview-fix.css inside enfold-child/css/

add_filter('avf_preview_window_css_files', function($css) {
    $css[ get_stylesheet_directory_uri() . '/css/custom-preview-fix.css' ] = 1;
    return $css;
}, 999);

and have inside custom-preview-fix.css:

#av-admin-preview img[src*=".svg"]:not([is-svg-img="true"]) {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

#av-admin-preview .alignleft { float: left; margin: 0 20px 20px 0; }
#av-admin-preview .alignright { float: right; margin: 0 0 20px 20px; }
#av-admin-preview .aligncenter { display: block; margin-left: auto; margin-right: auto; }

Edit: something new to me – yes Mike is right – it is the “different” mobile menue – and you choose the same menue as the desktop menue.

______________
For me a mobile Menue is always the hamburger one on enfold –

But even then – there is no conflict because what is id in text-menu ist a class on hamburger menue.
My suggestion is that you use a footer-menue in this way:

this will end in duplicate ID’s

understanding that flexbox layout:
https://webers-testseite.de/flex-columns-understanding/

Not really—don’t use the “equal-height” option; instead, set the “align-items: stretch” option for the flex container.
Take another look at the example page.
By the way: “align-items: stretch” is the default value on flex containers — so you don’t need to specify it explicitly.

_____________ just for info ______________

/* === flex container settings (default values):  === */
flex-direction: row	  /* === Side by side, not one below the other. === */
flex-wrap: nowrap   /* === Everything on a single line, no line breaks. === */
justify-content: flex-start  /* === Everything left-aligned (on the vertical axis). === */
align-items: stretch  /* === Full height (on the horizontal axis). === */

/* === Items Settings (default values):   === */
flex-grow: 0   /* === No automatic filling of empty space. === */
flex-shrink: 1  /* === Shrinking is permitted if space is limited. === */

see my post above.

Are you using any caching tools ? They mostly got an option to clear the cache, if you edit (update) a post/page.
Next: Browser do also Cache Pages. Sometimes they deliver the cached Content. etc.

btw. : have a look what happens to your top divider on home page if you add this to your quick css:

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top {
  transform: scaleY(-1);
  top: -39px;
}

#top.home #av_section_1 .avia-divider-svg.avia-divider-svg-top svg {
  fill: #FFF !important;
}

#top.home #av_section_1 .scroll-down-link {
  bottom: 25px;
}

you see on the first two images the position where you can enter a custom value:
https://kriesi.at/support/topic/making-the-logo-bigger-2/#post-1496110

if you enter 200px there on “header custom height” ( i guess you are now back to “large” ) you had to synchronise that max-height value on #top #menu-item-logo img rule to 200px too.

@media only screen and (min-width: 990px) {
  #top #menu-item-logo a {
    display: inline-block;
    transform-origin: center top;
  }

  #top #menu-item-logo img {
    max-height: 150px;
    height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

synchronise the max-height : 150px to what you have determined in the header enfold start height options.

Even with a vector-based SVG logo, this font (the smaller one in your logo) would no longer be legible.

You could make the header area larger overall, but then let it shrink so it doesn’t take up too much space.

_________________
Another option would be to display the logo larger at first and then have it move to the desired position inside navigation as the page is scrolled.
this for child-theme functions.php:

function logo_shrink_navigation(){
?>
<script type="text/javascript">
(function($) {
    function initLogoScrollAnimation() {
        // ===== CONFIGURATION =====
        var config = {
            maxScroll: 100,
            scaleStart: 2.3,
            scaleEnd: 1,
            translateYStart: 80,    // Starting point shifted in the Y direction (e.g. 80px for down shift)
            translateYEnd: 0,       // End point (must be 0 for the final position)
            translateXStart: -230,  // Starting point shifted in the X direction (e.g. -100px for the left)
            translateXEnd: 0        // End point (must be 0 for the final position)
        };
        // =========================
        
        var ticking = false;
        var $menuLogo = $('#menu-item-logo');
        var $menuLogoLink = $menuLogo.find('a');
        var $menuLogoImg = $menuLogo.find('img');
        var logoWidth;
        
        function updateLogo(scrollTop) {
            var progress = Math.min(scrollTop / config.maxScroll, 1);
            
            // Skalierung berechnen
            var scaleDiff = config.scaleStart - config.scaleEnd;
            var scale = config.scaleStart - (scaleDiff * progress);
            
            // Y-Verschiebung berechnen
            var translateYDiff = config.translateYStart - config.translateYEnd;
            var translateY = config.translateYStart - (translateYDiff * progress);

            // X-Verschiebung berechnen (NEU)
            var translateXDiff = config.translateXStart - config.translateXEnd;
            var translateX = config.translateXStart - (translateXDiff * progress);
            
            var extraSpace = (scale - 1) * logoWidth / 4;
            
            // Transform mit translateX ergänzt
            $menuLogoLink.css('transform', 'translateX(' + translateX + 'px) scale(' + scale + ') translateY(' + translateY + 'px)');
            
            $menuLogo.css({
                'margin-left': -extraSpace + 'px',
                'margin-right': -extraSpace + 'px',
                'z-index' : '19'
            });

            $menuLogoImg.css({
                'background-color': 'rgba(255,255,255,0.8)',
                'backdrop-filter': 'blur(5px)',
                'border-radius': '25px',
                'border': '1px solid #FFF'
            });
        }
        
        $(window).on('scroll', function() {
            var scrollTop = $(window).scrollTop();
            
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    updateLogo(scrollTop);
                    ticking = false;
                });
                ticking = true;
            }
        });
        
        // Logo-Breite messen und initial setzen
        logoWidth = $menuLogoLink.outerWidth();
        updateLogo($(window).scrollTop()); // Initialen Scrollwert beim Laden berücksichtigen
    }
    
    $(document).ready(function() {      
        setTimeout(function() {
            initLogoScrollAnimation();
        }, 300);
    });  
})(jQuery);

</script>
<?php
}
add_action('wp_footer', 'logo_shrink_navigation');

the confic section is for the starting look of your logo (scale, shift x and y-axis etc)

look at start this way:

after scroll it is in the center of your nav.

Lass also nur noch als hack drin:

.avia-safari.avia_mobile #wrap_all, 
.avia-safari.avia_mobile html, 
.avia-safari.avia_mobile body {
    height: auto !important;
    min-height: 0 !important;
}

.avia-safari.avia_mobile #main {
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.avia-safari.avia_mobile html {
    background-color: #11abd6 !important; 
}

#socket {
    z-index:10005
}

die untere ist dafür, wenn man manchmal schnell wischt, und “überscrollt” zeigt sich hie und da der Hintergrund (meist weiß) um das zu verhindern auf deine Footer Farbe setzen.

Bitte lies auch mal was ich so schreibe!

Warum das CSS deine Seite zerstört:
Der “Sticky-Footer”-Killer: html, body { height: -webkit-fill-available } zwingt das gesamte Dokument dazu, genau so hoch wie der Bildschirm zu sein. Das bricht oft das natürliche Scrollverhalten.

Die “Tab-Bar-Überdeckung”: Dass der Footer unten überdeckt wird, liegt am Konflikt zwischen -webkit-fill-available und 100svh. Das iPhone rechnet bei fill-available oft die untere Leiste (die Browser-UI) nicht korrekt ab, wodurch der Content “hinter” die Safari-Buttons rutscht.

Die Weißflächen: min-height: -webkit-fill-available !important in Kombination mit height: auto !important zwingt Sektionen, die eigentlich klein sein sollten, dazu, den gesamten Screen zu füllen – selbst wenn sie mitten im Content stehen.

Daher: notiere dir die bestehenden CSS Rules – und lösche diese:

html, body {
    height:-webkit-fill-available
}

#wrap_all {
    min-height:-webkit-fill-available
}

@supports (-webkit-touch-callout: none) {
    .av-minimum-height, .fullsize {
        min-height: -webkit-fill-available !important;
        height:auto !important
    }
}

@supports (-webkit-touch-callout: none) {
    .av-fullscreen, .av-minimum-height {
        min-height:100svh !important
    }
}

und versuche mal diese hier:

/* 1. Globalen Zwang für html/body nur auf Mobilgeräten aufheben */
/* Nur für Mobile + Safari (iPhone/iPad) */
.avia-safari.avia_mobile #wrap_all, 
.avia-safari.avia_mobile html, 
.avia-safari.avia_mobile body {
    /* Wir heben den globalen Zwang auf, der das Scrollen und die Footer-Sichtbarkeit stört */
    height: auto !important;
    min-height: 0 !important;
}

/* 2. Gezielter Fix für die Weißflächen und Footer-Überdeckung auf iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* Nur wenn Enfold Safari und Mobile erkennt */
    .avia-safari.avia_mobile .av-minimum-height, 
    .avia-safari.avia_mobile .fullsize,
    .avia-safari.avia_mobile .av-fullscreen {
        /* Nutze dvh (Dynamic Viewport Height) für korrekte Footer-Berechnung */
        min-height: 100dvh !important;
        height: auto !important;
        /* Verhindert den Geister-Weißraum durch fill-available */
        -webkit-fill-available: stretch; 
    }
}

/* 3. Sicherstellen, dass der Footer nicht von der unteren Tab-Bar verdeckt wird */
.avia-safari.avia_mobile #main {
    padding-bottom: env(safe-area-inset-bottom) !important;
}
@supports (-webkit-touch-callout: none) {
    .avia-safari.avia_mobile #wrap_all {
        /* Erzeugt einen Puffer unten, damit der Content nicht unter der Leiste klebt */
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

Ob du den fixierten “Einwilligung verwalten” da lassen solltest – oder lieber hinter dem Footer verschwinden lässt ist dir überlassen.
Setze mal :

#socket{
    z-index: 10005;
}

PS: fernab von deinem White Space on iPhone Problem – sehe ich das du oft diesen Trenner mit den drei linien einsetzt.
bist du eigentlich vertraut damit eigene svg Divider in Enfold zu haben?
dein Trenner mit den drei linien ließe sich gut umsetzten mit:

nicht wundern bei Enfold stehen die svg Trenner auf dem Kopf – der scharze Teil ist das was nachher durch die Anschlussfarbe ersetzt wird.
Großer Vorteil : responsiv sorgt vector-effect=”non-scaling-stroke” dafür das die Stroke-weite über alle screen-breiten gleich bleibt (also gut sichtbar ist) :
https://webers-testseite.de/j-und-s/