Trick # 130 | Dieser Beitrag beinhaltet 303 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Der Inhalt von Websites, welche mit dem Divi-Theme erstellt werden wird auf mobilen Geräten mit einer maximalen Breite von 80 Prozent der Anzeigenbreite dargestellt. Mit CSS-Code können Sie diesen Wert jedoch ganz einfach verändern.
Fügen Sie folgenden Code in das CSS-Stylesheet Ihrer Website ein. Sie finden es unter Design/Customizer/Zusätzliches CSS:
@media only screen and (max-width: 980px) {
#top-header > .container,
#main-header > .container,
#et_search_outer > .container,
body.single #main-content > .container,
body.page:not(.et-tb-has-template) div.et_pb_row,
body.page.et-tb-has-template .et-l--post div.et_pb_row,
body.single-project div.et_pb_row,
body.single-project div.et_pb_row.et_pb_row_fullwidth {
width: 90% !important;
}
}- Dieser Code wirkt bei einer Anzeigenbreite von maximal 980 Pixel (Zeile 1) – dies betrifft also vorab Tablet und Mobiltelefonansichten. Natürlich können Sie auch eine andere Breite als Breakpoint definieren.
- Anschliessend folgt eine Menge CSS-IDs und -Klassen. Diese sollten Sie unverändert übernehmen.
- Interessant wird’s auf Zeile 10: Dort werden mit obigem Code 90 Prozent als Contentbreite definiert. Diesen Wert können Sie nach eigenem Gusto anpassen.
Das war’s auch schon. Gar nicht schwierig. Oder?
Werbung
Den ersten Abschnitt - den Lead - eines jeden WordPress-Beitrags besonders auszuzeichnen und zu formatieren, ist etwas aufwändig und auch gar nicht nötig. Mit ein paar Zeilen Code übernimmt WordPress dies völlig automatisch.
Beiträge mit Beitragsbildern werden im Blog-Modul des Divi-Themes ansprechend dargestellt. Was aber, wenn Sie keine Beitragsbilder verwenden? So macht es auch Dr. Code. Sie haben aber auch ohne Bilder die Möglichkeit, Ihre Blogbeiträge ...
Auch im Divi-Theme lässt sich mit der Maus hervorragend zoomen. «Ctrl» drücken und dazu das Mausrad bewegen; schon verkleinert oder vergrössert sich die Seitenansicht. Fast immer wenigstens. Ein Mini-Hack erklärt, was unternommen werden muss, ...
Gerade in mehrspaltigen Designs möchte man vielleicht ein Bildmodul in exakt derselben Höhe wie der nebenan liegende Text darstellen. Das schaffen wir mit ein wenig CSS-Code.
Keine Inhalte gefunden.
Werbung
