Header Blur - Abstand

  • Guten Morgen Mario,


    ich nutze das Header Blur Widget, vielen Dank dafür, dass ist super.


    Ich habe lediglich eine kleine kosmetische Anmerkung:

    In der mobilen Ansicht geht der Text bis direkt an den Displayrand. Kann man da einen kleinen Abstand einbauen, idealerweise den gleichen wie im Rest der Seite. Ich habe mal einen Screenshot beigefügt.


    Kann eigentlich Firefox keinen Blureffekt? Bei mir scheint es der Hintergrund in der desktop Ansicht voll durch.


    Nutze Zeta 15.4.1 Business mit dem Layout Campfire Responsive


    Besten Dank

    Tobias

  • Noch eine kurze Frage: Nach Implementierung des Widgets sind meine Werte im Google Speed Test für Mobile recht deutlich gefallen. Vor allem Largest Contentful Paint und Cumulative Layout Shift liegen im roten Bereich. Für Dekstop ist alles OK.

    Mir ist bewusst, dass der Speed Test nicht der heilige Gral ist, aber vielleicht kann man da von der Programmierung her noch etwas optimieren.

    Besten Dank

    Tobias

  • zu 1.

    Da sollte folgendes helfen.

    Einstellungen > CSS

    CSS
    <style>
    .header-blur_mobile h1, .header-blur_mobile p {
    margin:0 15px !important;
    }
    </style>


    zu 2.

    Firefox ist scheinbar noch dabei den (backdrop-filter) zu implementieren. LINK

    Bis das funktioniert hilft wohl nur die Hintergrundfarbe zu erhöhen damit der Text besser lesbar ist.


    zu3.

    Hier wird nur sehr wenig Code mit gegeben. Daran kann es nicht liegen.

    Eventuell mal das Bild welches unter "Bild Mobile" angegeben ist weiter komprimieren.

  • Danke Mario, vor allem für die schnelle Rückmeldung.


    zu 1.: Hat geklappt, vielen Dank

    zu 2.: Auch wenn ich persönlich Firefox verwende, wird der ja immer weniger genutzt, daher nicht wirklich wichtig.

    zu 3.: Bilder komprimieren habe ich versucht, leider kann ich es nicht weiter komprimieren ohne dass es sehr pixelig wird. Der CLS zeigt bei mir 0,495, er sollte ja eher höchstens bei der Hälfte liegen. Ich habe eine weitere Webseite mit diesem Widget, da ist der Wert ähnlich. Dort sind die Bilder im Header viel kleiner. Ich habe auf einer weiteren Seite Headerbild Parazoom eingefügt, da zeigt mir der Speedtest einen CLS Wert von 0,021. Da sind die Bilder zwar auch nicht sehr groß (eher wie bei der zweiten genannten Webseite), aber da scheint es vom Aufbau smoother zu laufen. Vielleicht liegt es ja auch an anderen Seiteninhalten bzw. -elementen, aber vielleicht als Anregung dass es bei Parazoom super schnell geht. Ich werde mal testen, ob ich vielleicht Parazoom auf der ersten Webseite einbauen kann.


    Auf jeden Fall vielen Dank für deinen super Support und die tollen Widgets.


    Viele Grüße

    Tobias