Divi-Button: Responsive-Zeilenabstand anpassen

von | Divi

Das Problem des Divi-Buttons

Der Divi Button ist ein großartiges Modul, das sich schnell anpassen lässt. Kurzer Hand besitzt man ohne viel Aufwand einen voll funktionsfähigen Button mit einer passenden Hover-Animation.

Dem ein oder anderen wird aber schon aufgefallen sein, dass in der mobilen Ansicht der Zeilenabstand schnell eine unschöne Größe annimmt. Dann wird der Button riesig und gestalterisch ist das keine schöne Angelegenheit mehr. Blöderweise lässt sich der Zeilenabstand nicht innerhalb des Moduls per Mausklick konfigurieren. Wir benötigen also etwas CSS-Code.

Die Lösung: So änderst Du den Responsive-Zeilenabstand

Gehe in den Moduleinstellungen Deines Buttons unter Erweitert/Benutzerdefinierte CSS/Hauptelement

Wähle das Smartphone oder Tablet  aus (dort tritt der Fehler mit dem Zeilenabstand in der Regel auf)

Füge dann den folgenden CSS-Code dort ein:

line-height: 1.1;

Danach sollte der Button auf dem Smartphone einen optisch schönen Zeilenabstand besitzen. Natürlich kannst Du den Wert von 1.1 auch ändern und so anpassen, wie Du es für richtig hältst.

Falls der Code oben nicht funktioniert, füge dem Code noch ein „!important“ hinzu. Damit sagst Du dem Divi-Theme, dass Deine CSS-Anweisung Vorrang hat. So sollte es ganz sicher funktionieren:

line-height: 1.1 !important;

Fertig

Das wars, Du hast es geschafft!