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“.
