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 Menümodul des Divi-Themes lässt einige Einstellungen zu: Logo und Menü zentrieren; Logo links und Menü rechts - was aber fehlt, ist die Option das Menü links und das Logo rechts darzustellen. Mit ein wenig Code kriegen Sie aber auch dies hin.
Elegant Themes - der Hersteller des Divi-Themes - empfiehlt für eine Paginierung von Blog-Beiträgen das Plugin WP-PageNavi. Nur leider sieht das Resultat standardmässig nicht so hübsch aus. Mit ein wenig CSS wird das Ganze besser lesbar und ...
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 ...
Unlängst haben wir Ihnen gezeigt, wie Sie Separatoren im Divi-Menu-Modul platzieren. Das funktioniert natürlich auch, wenn Sie das Standard-Menu des Divi-Themes verwenden. Der CSS-Code ist freilich etwas anders.
Keine Inhalte gefunden.


