Beiträge von Sailor56

    Das hier ist keine Lösung... sonder nur ein Test, ob der IE überhaupt was brauchbares mit der Umstellung auf Flex anfangen kann....


    Füge diesen Code bitte mal in das 'zusätzliche CSS' im Customizer ein - und prüfe, ob sich damit das Problem im IE verbessert und ob andere Browser damit auch klar kommen.

    Gib uns bitte einen Link zu der Seite - man kann den 'Kasse-Button' gewiss mit ein paar Zeilen CSS ausblenden, aber dazu müssen wir den Code in seiner Gesamtheit sehen und das geht am besten mit einem Link zum Problem.

    Ich fürchte, da hast du auf das falsche Pferd gesetzt... Grid - Layout wird vom IE nicht oder nur teilweise unterstützt.
    Schau mal bei 'Can I use' nach, welcher Browser was kann.
    Beispiel 'grid'
    https://caniuse.com/#feat=css-grid
    oder 'grid-template-rows'
    https://caniuse.com/#search=grid-template-rows
    oder 'grid-template-areas'
    https://caniuse.com/#search=grid-template-areas
    Ich könnte die Reihe gut noch weiter fortsetzen... aber du wirst die Botschaft schon wohl auch so verstanden haben. Grid und IE geht nicht.
    Vielleicht solltest du dein Layout auf Flexbox umstellen - ich glaube, da hast du auch beim IE größere Chancen was ordentliches hinzubekommen.

    Ja... und wenn du dem Slider eine andere Farbe spendierst als dem Handle, dann sieht man auch, was man machen muss ;)!
    Warum da Unterschiede in der Darstellung zwischen Audio- und Videoplayer sind, musst du den Entwickler des / der Player fragen. Der hat das so programmiert und ich habe leider davon überhaupt keine Ahnung... ich kann nur HTML und CSS ;)!

    Versuche bitte mal folgenden CSS Code.

    CSS
    a.mejs-volume-slider {
      background-color: #000 !important;
    }
    .mejs-volume-slider .mejs-volume-total .mejs-volume-handle {
      background-color: #fff !important;
    }


    Die gewünschte Farben nach belieben.

    Zu dein Problem mit der Schriftgröße dem Fettgedruckten könntest du folgendes Testen:

    Code
    #primary-menu > li > a {
        font-size: 1.0em; /*Vorsicht, wenn die Schriftgröße zu groß ist, bricht das Menü um*/
        font-weight: 700; /*Einstellbar in hunderter Schritten von 100 bis 900*/
    }


    Das grau hinterlegte 'Über' kann ich nicht erkennen - weder im FireFox noch im Chrome.

    Die Social Media Icons beim hovern durchsichtig machen - vielleicht so:

    Code
    .social-buttons a:hover,
    .social-buttons a:hover i {
        background: transparent;
        color: #7fc7af;
        opacity: 0.8;
    }


    Damit sollte zunächst die Voreinstellung für Farbe und Hintergrund überschrieben werden (auf die Werte, die das 'ungehoverte Icon hat) und dann die Deckkraft (opacity) reduziert werden - mögliche Werte von 0 bis 1.

    Welches Dropdown.. welcher Pfeil?

    Den CSS Code bitte in das 'zusätzliche CSS' im Customizer - auf unerwünschte Nebenwirkungen prüfen.

    Warum funktioniert es nicht, wenn man für height und width 50% angibt?


    Weil die Angabe in % keine wirkliche Größenangabe ist... es sagt xx% des verfügbare Platzes - und dieser verfügbare Platz wird von dem Elternelement vorgegeben. In deinem Fall das <body> ... der ist nun mal in Höhe und Breite unterschiedlich.
    Dagegen sind vh und vw tatsächlich messbare Größen, die von Breite bzw Höhe der Bildschirmanzeige abhängig sind und sich deswegen für solche Skalierung eignen.
    In Kurzform.. 50% sind die Hälfte des verfügbaren Platzes (in der Regel ergibt das bei height und width unterschiedliche Werte)
    50vw - die Hälfte der Bildschirmbreite
    50vh - die Hälfte der Bildschirmhöhe

    Ein Hintergrundbild belegt keinen Platz, sorgt als nicht dafür, dass das Elternelement sich an dessen Größe anpasst.
    Du musst also deinem <div> zunächst eine Größe (Höhe und Breite / zB 'height: 50vh; width: 50vh;')) geben und dann dem Hintergrundbild sagen, wie es sich im verfügbare Platz verhalte soll (zB 'background-size: cover;')

    Sowas führt oft zu Problemen mit Webfonts,....


    Kann schon sein... in diesem Fall ist allerdings 'Calibri' als Font-Family angegeben - also eine Standard MS Schriftart, die normalerweise auf einem Windows System schon installiert ist.
    Meines Wissens hat 'Calibri' kein Navigations-Pfeil nach unten Symbol.. aber UTF-8 hat, wenn man den richtigen Hex-Code nimmt.
    Ein Facebook Icon ist soweit ich weiß weder in Calibri noch in UTF-8 verfügbar - hier muss man wohl auf FontAwesome ausweichen. Wird aber schon auf der Seite des TE installiert.
    Um das Problem zu lösen (sollte die Vermutung von @b3317133 nicht zutreffen) könnte dann folgender CSS weiter helfen:

    HTML
    .main-navigation li a:not(:last-child)::after {
        content: '\2B9F';
    }
    .social-links ul a[href*="facebook.com"]::before {
        font-family: "FontAwesome";
        content: '\f230';
        /* oder alternatives Icon */
        /*content: '\f09a';*/
    }

    Diese 'Viereck' wird erzeugt durch das Preudoelement ::after - welches in deinem CSS mit dem "content: '\f431'; " angegeben ist.
    \f431 ist jedoch in der UTF-8 Zuordnung nicht definiert und deswegen wird dieses Fehler-Viereck angezeigt.
    Schreibe mal in dein zusätzliches CSS im Customizer folgendes...

    HTML
    .main-navigation li a:not(:last-child)::after {
        content: '\2B9F';
    }


    Das sollte dir das V wiederbringen... und wenn du ein anders Symbol haben willst suche dir was passendes aus der UTF- 8 Tabelle aus.