Neue Bildklassen in Gutenberg alignwide und alignfull formatieren

Die beiden CSS-Klassen alignwide und alignfull ergänzen mit Gutenberg die bisherigen alignnone, alignleft, alignright und aligncenter Klassen für Captions und Bilder. Wie die bisherigen Klassen müssen auch die neuen im CSS des Themes entsprechend formatiert werden, damit sie erwartungsgemäß funktionieren.

Um die neuen Klassen anwenden zu können, muss das Theme sie unterstützen.

add_theme_support( 'align-wide' )
Code-Sprache: JavaScript (javascript)

CSS für alignwide und alignwidth (bei boxed Layouts und ohne Sidebar)

Das funktioniert vielleicht nicht in jedem Theme genau so, es kommt auf Struktur und sonstige Formatierungen an. Auch Breakpoints spielen eine Rolle, resp. ab welcher Displaygröße die Darstellung in der Form gelten kann.

.alignwide { margin-left : -20%; margin-right : -20%; max-width: 140% } .alignfull { margin-left : calc( -100vw / 2 + 100% / 2 ); margin-right : calc( -100vw / 2 + 100% / 2 ); max-width : 100vw; width: 100vw; } .alignfull img { width: 100%; }
Code-Sprache: CSS (css)

alignwide

giraffe 3351363 1920

alignfull

giraffe 3351363 1920

Mehr über „Max-width on blocks“

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.