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
Kennen Sie den progress-Tag in HTML? Oder den meter-Tag? Die beiden haben es in sich, werden aber irgendwo zwischen selten und kaum genutzt. Zeit, die beiden Tags einmal genauer anzusehen. Mit ihnen lassen sich nämlich höchst einfach ...
Wir werden ein Divi-Blogmodul verwenden um es in der Seitenleiste zu platzieren und die letzten Beiträge anzuzeigen. Ohne diese Methode müssten Sie ein Widget verwenden - verlören aber damit einige Gestaltungsfreiheit, weil Widgets meist etwas ...
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Heute bauen wir einen echten Hingucker: So genannte Flip-Cards, die sich umdrehen, sobald der Mauszeiger darüber bewegt wird. Das gibt ein ebenso cooles wie professionelles Look & Feel für Ihre Website.
Das filterbare Portfolio-Modul des Divi-Themes beitet – neben allen anderen Filterbuttons – zusätzlich einen Button mit der Aufschrift «Alle», unter welchem sämtliche Posts angezeigt werden. Dieser «Alle»-Button lässt sich mit ein wenig CSS ...
Keine Inhalte gefunden.
Werbung
