Trick # 44 | Dieser Beitrag beinhaltet 296 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Wie oft haben Sie beim Responsive-Webdesign schon dieselben Media-Queries neu geschrieben? Wie oft haben Sie dabei einen Tippfehler fabriziert? Ich für meinen Teil kann es kaum noch zählen. Irgendwann hab ich mir einen Bausatz zum copy/pasten angelegt.
Verwenden Sie einfach folgenden Code im CSS Styleheet (Design/Customizer/Zusätzliches CSS) als Grundgerüst:
/* Grosse Bildschirme über 1405px */
@media only screen and ( min-width: 1406px ) {
/* hier CSS einfügen */
}
/* Laptops & Desktops 1101-1405px */
@media only screen and ( min-width: 1101px ) and ( max-width: 1405px) {
/* hier CSS einfügen */
}
/* Tablets in Landscape-Modus 981-1100px */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
/* hier CSS einfügen */
}
/* Tablets in Portrait-Modus 768-980px */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
/* hier CSS einfügen */
}
/* Smartphones in Landscape-Modus 480-767px */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
/* hier CSS einfügen */
}
/* Smartphones im Portrait-Modus bis 479px */
@media only screen and ( max-width: 479px ) {
/* hier CSS einfügen */
}That’s it. Sie können nun relativ komfortabel Ihre CSS-Anweisungen für die jeweiligen Anzeigen definieren.
Werbung
Das Blog-Modul des Divi-Themes verlinkt standardmässig den Titel des Beitrags mit der Detailseite dessen, die Kategorie mit der entsprechenden Übersicht und den/die AutorIn mit der persönlichen Übersicht des/der Verfasserin. Das ist oft ...
Das Standard-Divi-Menu für die Anzeige auf Mobilgeräten zeigt einen farbigen Rand an. Ich mag das - aber es gefällt nicht allen. Hier ein Hack, wie Sie den Trennstrich los werden.
Ein kleiner handlicher Hack lässt die klassische Aufzählungsliste <ol> umgekehrt aufzählen: beginnend mit dem höchsten Wert und endend mit dem kleinsten. Dem HTML-Code wird nur ein kleines Attribut hinzugefügt, schon wird die Aufzählung ...
Hin und wieder stellen Websites Prozesse dar. Schritt 1, Schritt 2, Schritt 3 usw. Solcherlei lässt sich mit dem Divi-Theme gut bewerkstelligen. Die Schritte lassen sich mit einem Pfeilsymbol verdeutlichen. Wir zeigen Ihnen wie das geht.
Keine Inhalte gefunden.


