Hallo,
vermutlich kannst du das über ein paar entsprechende CSS-Regeln unter Design > Customizer > Zusätzliches CSS einstellen (Stichwort Media Query).
Aber das ist dann weniger eine WordPress-Frage. Am besten schaust du dir entsprechende Hinweise auf der folgenden Seite bezogen auf CSS an.
Viele Grüße
Hans-Gerd
Hi Hans-Gerd,
also CSS generell ist eigentlich nicht das Problem, für mich stellt sich eher die Frage wo ich denn das entsprechende Design, das bei einem kleinen Bildschirm wie dem Smartphone aufgebaut wird, in meinem Theme entsprechend anpassen kann. Im Stylesheet „style.css“ finde ich da jetzt irgendwie nichts.
Eine Seite mit einer CSS-Regel body { width: 960px; } ist nicht responsive, weil die Breite auf jedem Gerät gleich bleibt, egal wie die Auflösung des Displays ist. Verwendest du ein Display mit einer Breite von 375 Pixeln, werden 585 Pixel angeschnitten. Das Layout reagiert nicht auf die tatsächliche Bildschirmbreite.
Eine Seite mit einer CSS-Regel body { width: 90%; } passt immer die Breite der Seite auf 90% des Bildschirms an, egal ob du am 4K-Bildschirm sitzt oder die Webseiten auf dem Smartphone anschaust. Das nennt sich dann responsive Design. Die Anpassung erfolgt automatisch und daran kannst du nicht viel ändern – Prozent bleibt Prozent.
Möchte ein Entwickler aber, dass eine Seite auf großen Displays nur 60% der Breite des Displays einnimmt, bei kleineren Displays aber die volle Breite, lässt sich das über eine MediaQuery einstellen.
body { width: 60%; }
@media screen and {max-width: 600px} {
body { width: 100% };
}
Du kannst als ein responsive Design doch ändern, entweder indem du eigene MediaQueries hinzufügst oder indem du vorhandene MediaQueries anpasst. Soll die Seite auf kleinen Displays nur 90% Breite einnehmen, erstellst du im Customizer unter Zusätzliches CSS (oder im Stylesheet eines Child Theme) eine eigene Media-Query:
@media screen and {max-width: 600px} {
body { width: 90% };
}
Die CSS-Regel wird später geladen als die Regel im Theme und überschreibt deshalb die Werte dort.
Welche Regeln dein Theme verwendet, kannst du über die Entwickler-Tools des Browsers herausfinden. Für jemanden mit CSS-Kenntnissen ist das manchmal eine aufwendigere Suche, während jemand ganz ohne CSS-Kenntnisse sich wahrscheinlich überfordert fühlt. Also entweder CSS lernen (im Web gibt es tolle Tutorials) oder jemand beauftragen, der sich auskennt.
Alles klar, ich probier mal ein bisschen rum und würde mich dann gegebenenfalls nochmal melden…
Schau mal:
(zum Vergrößern anklicken)
Wenn ich auf der Startseite einen Rechtsklick mache und dann auf Element untersuchen gehe, öffnet sich der dunkle Bereich unten. Links ist das HTML (ich habe das <body>-Tag angeklickt), rechts siehst du die zugehörigen CSS-Regeln. Dabei ist auch eine MediaQuery (Pfeil). Du kannst in den Entwickler-Tools einen anderen Wert eingeben (z.B. 90% statt 100%) und siehst direkt, wie sich das auswirkt. Wenn dir die Änderung gefällt, kopierst du die CSS-Regel und fügst sie im Customizer unter zusätzliches CSS ein.
ja, das kenne ich. Ganz konkret ist mein Problem, dass auf dem Smartphone, die Ecken bei einigen Seiten nicht so richtig aufeinanderpassen und im unteren Bereich teilweise ein einfarbiger Hintergrund erscheint, der da nicht sein sollte. Ich würde auch ganz gerne die Startseite für Mobile Geräte ein wenig anders gestalten. Also der @media Tip war schon ganz gut… Ich versuch da dann morgen mal das besser hin zu kriegen. danke Dir!
