TwentyTwenty: Die Breite vom Absatz-Block ändern

Das Theme TwentyTwenty hat ein paar Eigenheiten. Unter anderem ist das Layout für den Absatz-Block recht schmal. Das heißt, es entsteht ein relativ breiter Rand links und rechts.

Für viele Blöcke wie z.B. Bilder oder Spalten, kann man „weite Breite“ oder „volle Breite“ auswählen.

Einstellung der Breite beim Block „Spalten“

Diese Einstell-Möglichkeit gibt es für den Absatz-Block leider nicht. Der Absatz-Block hat eine feste Breite, man kann bei diesem Block also nicht „weite Breite“ oder „volle Breite“ im Editor auswählen. Das heißt, du kannst die Breite nicht über den Editor beeinflussen.

Den Absatz-Block breiter machen

Wem der Absatz-Block also zu schmal ist, der muss ins CSS eingreifen. Die entsprechende Anweisung findet sich in Zeile 3589 in der style.css.

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { max-width: 58rem; width: calc(100% - 4rem); }
Code-Sprache: CSS (css)

Das bedeutet übersetzt: Alle Elemente, die sich im Container mit der CSS-Klasse .entry-content befinden und NICHT eine der aufgelisteten Klassen haben, sind maximal 58rem breit.

Im Layout sieht das so aus:

Oben sieht man den Absatz-Block mit einer Breite von 58rem, darunter ein Spalten-Block in „weiter Breite“

Wenn du die Breite des Absatz-Blocks ändern möchtest, könntest du die max-width ganz rausnehmen:

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { max-width: none; width: calc(100% - 4rem); }
Code-Sprache: CSS (css)

Oder du definierst eine andere maximale Breite. Die „weite Breite“ liegt TwentyTwenty bei 120rem. Dazu würde beispielsweise eine maximale Breite von 90rem ganz gut passen.

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { max-width: 90rem; width: calc(100% - 4rem); }
Code-Sprache: CSS (css)

Das würde dann so aussehen:

Oben sieht man den Absatz-Block mit einer Breite von 90rem, darunter ein Spalten-Block in „weiter Breite“

Das CSS kannst du im Customizer unter „zusätzliches CSS“ eintragen. Falls du mit einem Childtheme arbeitest, kommt das CSS in die style.css vom Childtheme.


Zum Theme TwentyTwenty und den unterschiedlichen Breiten gibt es hier im Blog noch einen älteren Artikel:

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die weitgehend inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.