Eine Schrift ist auf dem Smartphone zu groß, ein Abstand auf dem Tablet zu klein oder ein Element soll mobil ganz verschwinden? Mit CSS Media Queries steuern Sie das Aussehen Ihrer Website für jede Bildschirmgröße getrennt.

Die Grundlagen

Eine Media Query wendet CSS-Regeln nur an, wenn eine Bedingung erfüllt ist – meist eine bestimmte Bildschirmbreite:

/* Smartphone: bis 767 px */
@media (max-width: 767px) {
  h1 { font-size: 32px; }
}

/* Tablet: 768 px bis 1024 px */
@media (min-width: 768px) and (max-width: 1024px) {
  h1 { font-size: 44px; }
}

/* Desktop: ab 1025 px */
@media (min-width: 1025px) {
  h1 { font-size: 56px; }
}

Die Werte 767 und 1024 Pixel entsprechen den Standard-Breakpoints von Elementor. Nutzt Ihr Theme andere Breakpoints, passen Sie die Werte entsprechend an.

Elemente ein- und ausblenden

@media (max-width: 767px) {
  .nur-desktop { display: none; }
}
@media (min-width: 768px) {
  .nur-mobil { display: none; }
}

Vergeben Sie die Klasse im Page Builder unter „Erweitert → CSS-Klassen“. In Elementor geht das Ein- und Ausblenden auch ohne Code über „Erweitert → Responsive“.

Mobile First

Moderner ist der umgekehrte Ansatz: Zuerst schreiben Sie das CSS für Smartphones und erweitern es dann mit min-width für größere Bildschirme. Das hält den Code schlank und sorgt dafür, dass mobile Geräte nur das Nötigste laden.

Wohin mit dem CSS?

Unter Design → Customizer → Zusätzliches CSS, im Child-Theme oder in Elementor unter „Website-Einstellungen → Benutzerdefiniertes CSS“. Testen können Sie alles bequem in den Entwicklertools Ihres Browsers mit der Geräteansicht (Strg + Umschalt + M).