Du musst gar keine Datei anfassen. Es reicht, wenn du unter Design > Customizer > Zusätzliches CSS folgendes eingibst:
@media screen and (min-width: 48em) {
.wrap { max-width: 1400px; }
}
Den Wert 1400px habe ich willkürlich gewählt. Das kannst du nach deiner Einschätzung abändern. Wobei sich die Entwickler bei dem Wert 1000px schon was gedacht haben. 😉
Ja klappt, super! Jetzt ist nur der Kopfberich zu eng, kann ich den auch verggößern? Und da ich gerade Frage laune bin, noch die Letzte Frage, Ich habe im Kopf ein Logo drin. Das eigentlich 300 x xxx Pixel hat, aber es wird sehr klein dargesetllt, kann ich das auch vergrößern?
lieben Dank
Klar, kannst du alles machen.
Du weißt ja jetzt, wo du die CSS-Regeln einfügen kannst.
Ja aber ich weiss die Befehle nicht…
@media screen and (min-width: 48em) {
.wrap { max-width: 1400px; }
}
Wenn Media Screen für den Boddy steht, was muss ich das für den Kopf eintragen?
@media screen and (min-width: 48em)
bedeutet soviel wie „für Medium Bildschirm und eine minimale Breite von 48em“ (wobei em die Breite des Buchstaben „m“ in der gewählten Schriftart bedeutet). Mit „Boddy“ hat das nichts zu tun.
Schau … wenn du Themes ändern möchtest, musst du CSS können. Wenn du das nicht kannst, kannst du auch nur die Einstellungen anpassen, für die das Theme dir ein Optionsfeld anbietet.
Zum Einstieg kannst du versuchen, Werte in den Entwickler-Tools deines Browsers zu ändern: Rechtsklick auf das gewünschte Element (z.B. das Logo), dann „Element untersuchen“ (oder je nach Browser auch nur „Untersuchen“) und schon bekommst du eine Tabelle eingeblendet, in der links das HTML und rechts die zugehörigen CSS-Regeln stehen, z.B.
@media screen and (min-width: 48em) {
.custom-logo-link img,
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
max-width: 350px;
}
.custom-logo-link img {
max-height: 200px;
}
}
Du kannst die Werte 350px und 200px dann überschreiben und schauen, ob das Ergebnis so aussieht, wie du dir das vorgestellt hast. Das kopierst du dann und fügst es im Customizer als Zusätzliches CSS ein. Meistens bleibt es (wie du bereits festgestellt hast) nicht bei einer Änderung. Ich mag aber jetzt nicht jede Anpassung einzeln und auf Rückfrage mit dir durchgehen. Verständlich, oder?
Eine gute Einführung in CSS findest du z.B. beim Mozilla Developer Network.
Hallo Mario,
vielen Dank das hat mich weiter gebracht, Logo habe ich auch angepasst und vestanden! Das einzige was nicht geht und hier habe ich mich falsch ausgedrückt, sorry ist, den Menübereich zu verbreitern, hier steht der wohl nich auf 1000 px statt 1400 px. Weiss auch nicht genau wonach ich hier suchen soll?
Wie gesagt: Kaum machst du eine Änderung, kommt schon die nächste hinzu.
Also … ein letztes Mal: Rechtsklick auf’s Menü, Untersuchen, auf <div class="wrap">, zugehörige CSS-Regel gesucht:
@media screen and ( min-width: 67em ) {
.navigation-top .wrap {
max-width: 1400px;
}
}
Alle weiteren Anpassungen musst du irgendwie selbst hinkriegen. Du schaffst das.
Ach jetzt verstehe ich das, OK alles klar! Vielen Dank Mario 🙂
