Wenn du schon mal genervt warst, an jedem einzelnen Breakpoint deinen Content in GeneratePress mit GenerateBlocks nachzupflegen, habe ich hier die perfekte Anleitung für dich. Du lernst, wie du Padding, Typografie, Karten-Grids und Bildgrößen automatisch responsiv gestaltest, ohne für Tablet und Mobile alles doppelt (und dreifach) zu machen.
1. Padding ohne nervige Einzelanpassungen
Statt für jede Gerätebreite extra Padding-Werte festzulegen, nutze die CSS-Funktion clamp(). Damit definierst du einen Minimal- und Maximalwert sowie den Bereich, in dem das Padding dynamisch skaliert.
So geht’s:
- Öffne einen wie den von Clamp Calculator von Chris Burnell
- Für Padding links/rechts z.B.:
- Min: 16px (z.B. auf dem Handy)
- Max: 40px (z.B. auf dem Desktop)
- Viewportbereich: z.B. min 420px, max 1280px
- Lass dir den Generated-Wert ausgeben (sieht etwa so aus:
clamp(1rem, 2vw + 1rem, 2.5rem)). - Im Spacing von GenerateBlocks einfach unter „Padding“ diesen Wert eintragen – fertig!
2. Flexibler Umgang mit Schriftgrößen
Das gleiche Verfahren klappt super bei Überschriften und Fließtext, damit du nicht auf dem Handy plötzlich ein überdimensionales H1 hast.
Beispiel für eine Headline:
- Minimum: 2.5rem (für Mobile)
- Maximum: 4rem (für Desktop)
- Wieder einen Clamp-Wert im Calculator erzeugen und direkt ins Feld für Schriftgröße im Block eintragen.
Jetzt passt sich deine Überschrift automatisch der Breite an und bleibt immer schick.
3. Paragraphen auf die perfekte Lesebreite bringen
Statt mit % oder px zu hantieren, nutze die ch-Einheit (ch = Charakter Unit, also Anzahl der Buchstaben bzw. Zeichen)
- Gib dem Intro-/Paragraph-Block z. B. einen Max-Width von
60ch. - Vorteil: Die Textzeile ist nie breiter als 60 Zeichen — ganz egal, wie groß das Gerät ist. Das sorgt für gute Lesbarkeit ohne manuelle Einstellungen.
4. Grid-Layouts für Karten: Dynamische Spaltenzahl
Anstatt an jedem Breakpoint 3, 2 oder 1 Spalte einzustellen, arbeite mit auto-fit und minmax() direkt im Grid-Template:
repeat(auto-fit, minmax(300px, 1fr))- Das bedeutet: Jede Spalte ist mindestens 300px breit, so viele wie reinpassen. Wird der Platz zu eng, springt automatisch eine Zeile drunter — ganz ohne extra Anpassung.
- Den Wert für die Mindestbreite je nach Design anpassen (z. B. 250px, 400px, …).
5. Bilder immer im gleichen Seitenverhältnis
Auch hier keine festen Pixel-Höhen! Stattdessen nutzt du das CSS-Attribut aspect-ratio:
- Gib deinem Image-Block eine Klasse (z. B.
.thumbnail) und stelle ein:- Width: 100%
- Height: auto
- Aspect-ratio: z. B.
16 / 9
So bleibt das Seitenverhältnis immer gleich, egal auf welchem Gerät – keine abgeschnittenen oder verzerrten Bilder mehr!
Mit diesen Tipps kannst du dir das ständige Springen zwischen den Breakpoints sparen – deine Layouts sind sofort responsiv und du hast mehr Zeit für die schönen Dinge beim Webdesign. Natürlich kannst (und manchmal musst) du noch mit Media- oder Container-Queries nacharbeiten, aber in den meisten Fällen reichen die hier gezeigten Tricks völlig aus.
Viel Spaß beim Umsetzen!