Support » Themes » CSS Anderung für Footer, funktioniert nicht

  • Gelöst jandelay

    (@jandelay)


    Hallo,

    zur Darstellung der Zahlungsmethoden im Footer, benutze ich eine Column, diese ist wiederum in 6 weitere columns unterteilt die jeweils die Zahlungs-Logos enthalten.

    Auf Desktop werden diese so angezeigt wie gewollt.

    Bei der Mobile Darstellung werden die Zahlungsmethoden allerdings untereinander angezeigt.

    Ich hab schon rausgefunden, wenn ich folgendes ändere:

    @media (max-width: 599px)
    .wp-block-column {
        flex-basis: 100%!important;
    }

    Zu:

    @media (max-width: 0px)
    .wp-block-column {
        flex-basis: 100%!important;
    }

    Dann wird es schöner dargestellt. Allerdings funktioniert diese änderung nur beim Browser selbst, also wenn ich in Chrome rechtsklick „Untersuchen“ drücke.

    Wenn ich es in „additional CSS“ von wordpress einfüge ändert sich nichts.
    Andere CSS Änderungen funktionieren aber ohne Probleme. Könnte es an @media liegen.

    Habt ihr vielleicht eine alternative, wie ich es anders schöner darstellen könnte.

    Vielen Dank im Voraus.

    • Dieses Thema wurde geändert vor 1 Monat, 2 Wochen von jandelay.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Vorab: uns fehlt leider die Zeit, um hier Grundlagen in HTML, PHP, CSS und JavaScript zu vermitteln und wir verweisen deshalb bei Fragen zu Grundlagen auf andere Support-Foren, in den diese Themes behandelt werden. Ich bitte deshalb um Verständnis, dass ich nur kurz auf die Frage eingehe.

    @media (max-width: 599px) {
    .wp-block-column {
        flex-basis: 100%!important;
    }
    }

    ist eine so genannte Media-Query, die dem Browser Anweisungen für verschiedene Medien (Bildschirm, Ausdruck auf Papier, Sprachausgabe) und verschiedene Mediengrößen (hier eine Bildschirmgröße mit einer maximalen Breite von 599px, also unter 600px) liefert. Auch wenn aus Gründen der Übersichtlichkeit Media-Querys in den Entwickler-Tools anders ausgegeben werden, lautet die Syntax

    @media (max-width: Bildgröße) { ... }

    wobei die Bildgröße üblicherweise in Pixeln oder em angegeben wird. Wichtig ist, dass die CSS-Regeln (hier durch Auslassungspunkte ersetzt) in geschweifte Klammern gesetzt werden müssen, also z.B.

    @media (max-width: 599px) { 
      h {
        font-size: 1.2em;
      }
      p { 
        font-size: 1em;
        color: #444; 
      }
    }

    (hier tauchen für zwei CSS-Regeln drei Paare geschweifter Klammern auf).

    Eine Media-Query

    @media (max-width: 0px) { . . . }

    ergibt keinen Sinn, weil es keinen Bildschirm mit einer maximalen Breite von 0 Pixeln gibt. Um eine CSS-Regel zu setzen, die keine Größeneinschränkung hat, lässt du die Media-Query einfach weg. Ergänze ich das Beispiel oben mit

    h {
      font-size: 1.4em;
    }
    p { 
      font-size: 1.1em;
      color: #333; 
    }

    bezieht sich die CSS-Regel auf alle Darstellungen auf Displays über 600 Pixel Größe (drunter greift ja bereits die vorhandene Media-Query). Die Regel in der vorhandenen Media-Query wird aber überschrieben, wenn ich nachträglich eine weitere Regel für eine kleinere Bildschirmgröße angebe, z.B.

    @media (max-width: 299px) { 
      h {
        font-size: 1em;
      }
      p { 
        font-size: 0.8em;
      }
    }

    … oder eine weitere Media-Query mit der gleichen Bildschirmbreite hinzufüge und dabei spezifischere Regeln verwende oder nachträglich Werte mit einer Regel zum gleichen Selektor einsetze.

    In deinem Code-Beispiel hast du eine CSS-Klasse .wp-block-column verwendet, die der Block-Editor für alle Spaltenblöcke nutzt. Stil-Änderungen wirken sich dann nicht nur auf den Footer aus, sondern auch auch alle möglichen anderen Bereiche deiner Website. Deshalb ist es sinnvoll, entweder diesem Spalten-Block eine eigene CSS-Klasse zuzuweisen oder die CSS-Regel spezifischer zu halten, z.B. #footer .wp-block-column { ... }.

    Weitere Informationen zu Media-Queries findest du z.B. im Mozilla Developer Network: Using media queries

    Da deine Frage wie gesagt hier den Rahmen sprengt, ändere ich den Status des Thread auf „keine Support-Frage“.

    Thread-Ersteller jandelay

    (@jandelay)

    Ok, vielen Dank trotzdem für die Antwort.

    Ich habe mich nur gefragt warum @media änderungen im Browser funktioniert aber im additional css nicht.

    Werde es ohne versuchen.

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)