Responsive Headlines und Text

Gelöst Anna
(@anna88sabu)

vor 3 Jahren

Hallo, ich bearbeite gerade meine Website und benutze das Astra Theme mit Gutenberg und den Ultimate Addons (Blocks) von den Entwicklern vom Astra Theme. Leider sehe ich, dass manche Headlines in der mobilen Ansicht teilweise ganz schlecht umbrochen werden. Null responisve, sondern einzelne Buchstaben sind in der nächsten Zeile. Ich könnte jetzt zwar im Customizer insgesamt für headline 2 oder 3 eine kleinere Schriftgröße nehmen, aber dies könnte ins unendliche Bearbeiten und Verändern führen – da es ja unterschiedlich lange Headlines gibt. Ich möchte jetzt nicht Elementor oder ähnliches installieren für diese Problematik. Aber auch für größere Codeanpassungen fehlt mir gerade die Zeit. Was könnte ich tun? Eventuell Generate Blocks oder Kadence Blocks dazu installieren, denn diese bieten scheinbar eine bessere Einstellungsmöglichkeit für mobile Geräte an? Dann würde ich eventuell das gesamte Theme ändern, damit das Theme sozusagen zum Blockbuilder passt. Was ratet Ihr mir für die responisve Darstellung meiner Typografie, Headlines? Wie löst man dieses Problem mit der responsiven Darstellung und falschem Umbruch bei Headlines?

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren

Hallo,
in der Regel lassen sich solche Dinge mit entsprechenden CSS-Regeln (Media Queries) lösen. Entsprechende Infos findest du z. B. hier.
An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu. Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier oder hier.
Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren

Naja, ich hätte mir das auch angeschaut – aber ohne URL zur Website … ¯\_(ツ)_/¯

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren

Ich hab gerade mal in einer Testinstallation mit Astra und
Ultimate Add-Ons für Gutenberg eine Seite mit einem Advanced-Heading-Block H2 aufgesetzt. Die Zwischenüberschrift wird wortweise umgebrochen, wie zu erwarten war:

(zum Vergrößern anklicken)

Thread-Starter Anna
(@anna88sabu)

vor 3 Jahren

Vielen Dank erst mal. Ich weiß, ohne url immer schlecht. Ich bin nicht online mit der Website und möchte nicht immer mit Elementor und co Ballast aufbauen. Ich mache jetzt selbst mal Tests. Eventuell umbricht das so schlecht, da die Website nicht online ist und ich das Ganze zuerst im Browser von WordPress geprüft habe mit den Bordmitteln von WordPress und mit meinem Browser. Die Sache mit den einzelnen Buchstaben ist mir schon bei anderen Websites aufgefallen, ist aber nicht immer Astra gewesen.

Thread-Starter Anna
(@anna88sabu)

vor 3 Jahren

Ich merke nach meinen Tests, es hängt wirklich von dem Bildschirm, bzw. Größe ab. Besonders ipad und iphone in der Breite zersetzt die Headlines. Einzele Buchstaben sind zu sehen in der Breite, kommt teilweise durch schmalere Blöcke glaube ich. Ob das mit Gutenberg-Blöcken und Astra Inkompatibilität oder der Demo und der Schrift zusammenhängt, weiß ich nicht. Ich frage jetzt die Entwickler von Astra und dem zusätzlichen Plugin Addons, was über diesen Effekt bekannt ist. Ich habe ja erst angefangen mit der neuen Website, und keinerlei sonstige Plugins auf der Seite. Nur deren Demo verwendet mit dem Gutenberg Plugin von Astra. Ich könnte das Ganze verbessern mit CSS, aber ich werde wohl eher ein anderes Theme wählen, das mit Gutenberg besser harmoniert. Falls jemand noch einen Tipp hat: gerne melden. Ansonsten erst mal danke!

Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren

Hallo,
Astra ist ein anerkannt gutes Theme und ich kann mir nicht vorstellen, dass das Problem mit dem Theme zusammenhängt. Wenn du eine URL angeben könntest, könnten wir sicherlich eine Lösung finden. Aber ohne URL können wir dir wohl nicht helfen – schade 🤷‍♂️
Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren

Ich hab jetzt in einem Ultimate-AddOns-for-Gutenberg-Abschnitt einen Block Erweiterte Spalten eingefügt und auf fünf Spalten gesetzt. Dort habe ich einen Advanced Headings-Block H3 eingesetzt und tatsächlich wird an einer einzigen Stelle ein willkürlich erscheinender Textumbruch vorgenommen, weil das Wort einfach viel zu lang ist um in die Spalte zu passen:

(zum Vergrößern anklicken)

Das lässt sich auch mit CSS-Regeln zum Textumbruch nicht weiter steuern. Die Lösung ist schlicht und ergreifend, eine kleinere Schriftart zu wählen oder die Zwischenüberschriften nicht in so schmal laufende Spalten zu setzen. Der Vorwurf “ … dass manche Headlines in der mobilen Ansicht teilweise ganz schlecht umbrochen werden. Null responisve, …“ ist aus meiner Sicht nicht gerechtfertigt.

Da wir bisher kein Praxisbeispiel genannt bekommen haben, ist die Frage aus meiner Sicht hinreichend beantwortet. Ich markiere den Thread als „gelöst“.

Thread-Starter Anna
(@anna88sabu)

vor 3 Jahren

Vielen Dank an Bego! Ich denke, es liegt an großer Schrift und kleinen Spalten. Im gratis Pre-Layout Theme von Astra war dies so eingerichtet, aber das kann man ja ändern.