So vermeidest du mit wenigen Zeilen CSS-Code unschöne Abstände in der mobilen Version deiner Squarespace-Website
Die Idee hinter dem Raster, mit dem du bei Squarespace Inhaltsblöcke anordnen kannst, ist eigentlich super.
Eigentlich. Denn: Viele kämpfen immer wieder mit unschönen und ungewollten Abständen – vor allem in der mobilen Ansicht.
Vielleicht hast du es selbst schon bemerkt: In der Bearbeitungsansicht sind Überschriften auf einmal riesig. Und wenn du deine Website dann auf dem Handy öffnest, sehen sie wieder normal aus.
Das Problem dabei: Squarespace reserviert für Textblöcke Platz im Raster. Enthält ein Textblock Überschriften ist das viel Platz. Wenn die Überschriften dann auf dem Smartphone wieder kleinerer sind, entstehen die viel zu großen Abstände.
Genau da helfen unsere wenige Zeilen CSS-Code, die du einfach unter “Benutzerdefineirtes CSS” deiner Squarespace-Website hinterlegen kannst.
Das Wichtigste auf einen Blick
In der mobilen Ansicht des Squarespace-Bearbeitungsmodus’ werden Überschriften sehr groß angezeigt. Dadurch wird für Textblöcke im Raster zu viel Platz reserviert – und auf der Live-Website entstehen unnötige Abstände.
Unser kurzer CSS-Code – den wir “Better Mobile Editor” getauft haben – hebt das auf: Der CSS-Code verkleinert Überschriften in der Bearbeitungsansicht bewusst stark, damit du Textblöcke im Editor enger ziehen kannst – und auf der Live-Website keine ungewollten Abstände mehr hast.
Kurz gesagt:
Oft entstehen in der mobilen Ansicht von Squarespace-Websites unschöne Abstände.
Dieser CSS-Code verkleinert die Überschriften H1–H4 im mobilen Bearbeitungsmodus.
Das ermöglicht dir, Textblöcke im Editor kompakter zu platzieren und ungewollte Abstände zu vermeiden.
Der CSS-Code hat keine Auswirkung auf die Live-Website – sie wirkt nur im Editor.
So kannst du deine mobile Version sauber formatieren – und unschöne Abstände vermeiden.
Inhaltsverzeichnis:
Warum kommt es zu ungewollten Abständen, wenn ich meine Squarespace-Website auf dem Smartphone öffne?
Squarespace passt die Größe von Schriften in der mobilen Ansicht automatisch an die Fensterhöhe an. Also: Langes Smartphone → große Schrift, kurzes Smartphone → kleine Schrift.
Du siehst den Effekt, wenn du im Bearbeitungsmodus das Browser-Fenster kleiner ziehst. Dann werden alle Schriften automatisch kleiner. Bei Überschriften ist der Effekt besonders stark.
Das Problem dabei hängt mit dem Raster zusammen, an dem Squarespace alle Inhaltsblöcke ausrichtet. Denn: Im Bearbeitungsmodus reserviert Squarespace im Raster den benötigten Platz für einen Textblock – abhängig von der Schriftgröße im Bearbeitungsmodus.
Ein Beispiel: Eine Überschrift bekommt im Editor zwei Rasterzeilen zugewiesen. Auf dem Smartphone ist sie aber kleiner und würde locker in eine Zeile passen. Da aber zwei Zeilen reserviert sind, entsteht ein unnötiger Abstand zum nächsten Block.
Ein paar Zeilen CSS-Code lösen das Problem
Die ungewollten Abstände haben uns bei unseren Kundenprojekten echt gestört.
Eine einfache Lösung wäre, das Browserfenster beim Arbeiten sehr klein zu ziehen – aber das macht die Bearbeitung ziemlich mühsam.
Also haben wir uns mit ein paar wenigen Zeilen CSS geholfen.
Sobald du den Code unter “Benutzerdefiniertes CSS” einfügst, reduziert er automatisch die Schriftgrößen der Überschriften in der mobilen Ansicht des Editors. Squarespace reserviert dadurch weniger Platz im Raster – und die ungewolltenAbstände verschwinden.
An den tatsächlichen Schriftgrößen auf deiner Live-Website ändert sich natürlich nichts. Die Anpassung gilt nur im Editor.
Wenn der reservierte Platz nicht ausreicht, da die Überschriften auf derLive-Seite natürlich größer sind als bei aktivierter Erweiterung, ist das kein Problem. Squarespace streckt das Raster automatisch so weit, dass der Text komplett sichtbar bleibt.
Der CSS-Code für dich zum kopieren
Hier kannst du dir den CSS-Code kopieren und dann unter “Benuterdefiniertes CSS” deiner Squarespace-Website einfügen.
/* EVERYBLUE - Better Mobile Editor */
/* Überschriften werden im Bearbeitungsmodus der mobilen Version stark verkleinert um unschöne Abstände auf der Live-Website zu vermeiden. */
body.sqs-edit-mode-active.sqs-device-view-phone h1,
body.sqs-edit-mode-active.sqs-device-view-phone h2,
body.sqs-edit-mode-active.sqs-device-view-phone h3,
body.sqs-edit-mode-active.sqs-device-view-phone h4 {
font-size:80% !important;
}
/* ENDE: EVERYBLUE - Better Mobile Editor */
Wie nutze ich den CSS-Code?
Nach dem du den Code unter “Benutzerdefiniertes CSS” hinzugefügt hast, ist er sofort aktiv.
Im Bearbeitungsmodus der mobilen Ansicht werden dir dann immer deutlich verkleinerte Überschriften angezeigt. Zieh die Textblöcke anschließend auf die kleinstmögliche Höhe, um unnötige Abstände zu vermeiden.
Wenn du die Verkleinerung nicht mehr möchtest, kannst du den CSS-Code einfach löschen.
Ohne den CSS-Code: Im Bearbeitungssmodus der mobilen Ansicht wird viel Platz im Raster für Überschriften vorgesehen. Das führt in der Live-Ansicht zu unschönen und ungewollten Abständen.
⬇︎ ⬇︎ ⬇︎
Mit dem CSS-Code: Im Bearbeitungssmodus der mobilen Ansicht wird nur wenig Platz im Raster für Überschriften vorgesehen und der Text-Block (blauer Kasten) kann deutlich kleiner gezogen werden.
Fazit
Squarespace ist ein starkes Tool – aber die Skalierung der Schriftgrößen im mobilen Bearbeitungsmodus kann für unschöne Abstände sorgen.
Ein paar Zeilen CSS-Code schaffen hier Abhilfe. Probiere es einfach mal aus!
Diese Artikel könnten auch spannend für dich sein:
Anleitung: So aktualisiert sich das Jahr in der Fußzeile deiner Squarespace-Website automatisch
Flodesk: Das Email-Tool, das Selbstständige SEHR überzeugend finden!
So baust du ein Cookiebanner für deine Squarespace-Website (mit Opt-in-Funktion!)
Schriften für deine Website finden: Hier findest du die Besten - und solche, die nicht ALLE haben!
