Beiträge von Sailor56

    und sicherstellen, dass vor der Bestätigung "im Hintergrund" des Overlays noch keine Daten geladen werden...


    Ja... aber dazu müsste man wissen, was WP einem da alles in den 'head' reinschreibt und was davon unter die DSGV fällt... wenn es nur google, jquery, bootstrap und co sind, die kann man zur Not selber hosten. Ansonsten muss etwas tiefer geschaut und mit der Cookie-Abfrage das Laden der 'Gefahrenquellen' unterbunden werden.

    Wenn du dafür keine fertige Lösung findest, dann kannst du versuchen diese Funktionalität 'händisch' zu realisieren. Ist zwar etwas aufwändiger, aber sollte mit ein paar Zeilen PHP, JS, CSS und HTML durchaus machbar sein.

    Sollte vom Prinzip etwa so funktionieren.
    Du erstellst auf deiner Startseite ein <div> mit den Inhalten, die du dir für die Voschaltseite vorstellst.
    Dieses <div> bekommt im CSS die position: fixed; und muss den gesamten Bildschirm bedecken. Es liegt dann quasi als Overlay über der eigentlichen Startseite.

    Am Ende, ganz unten in dem <div> kommt dann ein Button oder Hyperlink 'gelesen und akzepiert' mit dem du per 'onclick' eine JS Funktion aufrufst, die sowohl das <div> mit display: none ausblendet und einen Cookie setzt, der speichert, dass die Datenschutzbestimmungen akzeptiert wurden.

    Diesen Cookie kannst du dann - beim nächsten Aufruf der Seite mit PHP auslesen und entsprechend dieses Overlay <div> einblenden oder weglassen.

    Guter Versuch :)... leider nicht ganz getroffen.
    .. also ich sehe da keinen Hyperlink mit der Klasse 'btn' in dem div mit der Klasse 'search'.
    Sagte ich doch - etwas Übung ist da schon nötig, um die wesentlichen Selektoren auch richtig zuzuordnen.
    Das wäre in deinem Fall die Lösung... das Elternelement von .search. Wobei ich davon ausgehe, dass es nur einmal auf der Seite vorkommt, sonst müsste man wieder schauen, ob es eine nähere Eingrenzung der Selektoren gäbe.

    HTML
    .search-widget-handle {
      display: none;
    }


    Durch Auswahl (mit dem entsprechenden Selektor) des Elternelements, werden natürlich auch alle anderen Kindelemente in diesem Elternelement ausgeblendet - in diesem Fall ist das wohl ok und so gewünscht... ohne die Lupe braucht man auch den anderen Quark nicht... aber in anderen Fällen muss man da natürlich vorsichtig sein - immer auf unerwünschte Nebeneffekte prüfen.

    Der Button sollte durch ...

    HTML
    #shapely_home_parallax-3 a.btn {
      display: none;
    }


    ausgeblendet werden.

    Diese Dinge selber herausfinden geht am einfachsten mit den Webentwickler Tools, die bei allen Browsern integriert sind und normalerweise mit F12 gestartet werden... besser allerdings startet man den 'Inspector' durch Rechtsklick auf das zu untersuchende Element und dann die Auswahl 'Element untersuchen' - je nach Browser kann das auch sinngemäß etwas anders heißen.
    Der Inspector öffnet sich dann gleich an der richtigen Stelle und das gesuchte Element ist gleich im Fokus.
    Mit ein bisschen Übung findet man dann schnell die nötigen Informationen.
    In deiner Frage wäre das das Element 'a.btn' .. ein Hyperlink mit der Klasse 'btn'. Von denen gibt es allerdings mehrere auf der Seite, deswegen muss weiter eingegrenzt werden. Das geschieht in der Regel durch Auswahl eines passenden Elternelementes...
    in deiner Frage also ein 'a.btn' innerhalb des Elementes '#shapely_home_parallax-3'.

    Du könntest versuchen deinen <h3>'s eine einheitliche Höhe zu geben... zB

    HTML
    .services-builder .iconmain h3 {
        min-height: 2em;
    }


    Das wird dir aber nur so lange helfen, wie die Überschriften nicht mehr als zweizeilig sind... bei etwa 760px Bildschirmbreite bricht die Überschrift im rechten Column um... und dann passt das wohl nicht mehr! Da müsstest du dann mit @MediaQueries etwas nachhelfen.

    Es sollte reichen, wenn du opacity auf 1 setzt.

    HTML
    .site-logo a:hover {
       opacity: 1;
    }


    Dieses solltest du in das 'zusätzliche CSS' eintragen, damit diese Anweisung zuverlässig nach der ursprünglichen Anweisung in der style.css gelesen und angewendet wird.

    Es sieht so aus, als würde dir da das Plugin 'Jetpack' etwas die Quere kommen und die Formatierung dieser Bilder zu manipulieren.
    Versuche mal... aber bitte dringend im zusätzlichen CSS, damit diese Anweisung ganz am Schluss, hinter allen anderen CSS Dateien gelesen wird... folgendes einzutragen.

    HTML
    .jetpack-lazy-images-js .jetpack-lazy-image {
      display: block;
    }


    Sollte das nicht wirken, dann auch mal

    HTML
    .jetpack-lazy-images-js .jetpack-lazy-image {
      display: block !important;
    }


    versuchen.
    Das ist übrigens auf beiden Seiten das selbe Problem.

    Schade, dass dein Projekt nicht online ist :(! So ein Phänomen ist mir noch nicht unter gekommen. HTML und CSS ist ja kein Hexenwerk... und mit der beschriebenen Methode habe ich bisher immer zuverlässig alles das gefunden, was ich gesucht habe.
    Untersuche doch mal deine Quellcode, ob da nach der Einbindung deiner (Child) style.css noch irgendwas eingebunden wird, was nach CSS aussieht?

    Das hört sich nach ziemlicher Ratlosigkeit an! Dabei sollte es doch ganz einfach sein.
    ... mit der rechten Maustaste genau das Element anklicken, dass man ändern will und dann im Popup-Menü 'Element untersuchen' auswählen (kann bei anderen Browsern auch sinngemäß anders heißen). Es sollte sich im Inspektor dann genau die Stelle öffnen, die man untersuchen will. Und ggf kann man von dort auch die noch auf vorhandene Kind- und/oder Elternelemente zugreifen.
    Klappt das so bei dir nicht?

    Dann solltest du mit dem Inspektor mal schauen, ob .storefront-primary-navigation der richtige Selektor ist... vielleicht ist das ja 'nur' das Elternelement und du müsstest sowas wie
    .storefront-primary-navigation a
    oder
    .storefront-primary-navigation li
    ....
    nutzen, weil die Schriftfarbe eben dem Kindelement zugeordnet ist.

    Das Problem mit dem Hamburgermenü ist relativ einfach zu lösen... das mit den Sozial Media kollidiert allerdings etwas mit der Suchfunktion...
    Aber zum Testen zumindest hier ein Versuch:


    Bitte in das 'zusätzliche CSS' einfügen. (Vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    nööö... kann ja auch nicht ;)!
    Weil dort inline.. also im <img...> Tag selbst ein 'min-height: 428px;' angegeben ist - dieses min-height musst 'ungültig' machen.
    zB so:

    HTML
    div.video-wrapped {
      min-height: unset !important;
    }


    Allerdings ohne Gewähr, weil ich zur Zeit nicht selber testen kann.