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
Wenn Sie viele Menüpunkte in Ihrem Divi-Menü aufführen, kann es vorkommen, dass es auf Mobilanzeigen höher ist als der anzeigbare Bereich des Displays. Gerade bei Untermenüs kann das schnell mal passieren und es können einige der Menü-Punkte ...
Beiträge werden im Divi-Theme standardmässig mit einer Seitenleiste dargestellt. Ausserdem werden die Ränder eingerückt, was Platz verschwendet und überdies einer einheitlichen Darstellung nicht eben zuträglich ist. Zwar lässt sich dies in ...
WordPress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich ...
Mit einem «Sticky-Widget» können Sie Ihrem Theme Widgets hinzufügen, die auch dann angezeigt werden, während der Benutzer auf der Seite nach unten scrollt. Wir zeigen Ihnen, wie Sie dem Divi-Theme einen «Sticky-Widget»-Bereich für die ...
Keine Inhalte gefunden.


