Einzelne Buchstaben in neuer Zeile

scharf-s

Hello,
in diesem Theme werden einzelne Buchstaben eines Wortes einfach in eine neue Zeile gesetzt, abhängig von der Bildschirmgröße.
Wie es aussieht, immer nur in Boxen, wie die Blog-Preview-Boxen.
Je nach Bildschirmgröße sind hier einige solcher Fälle zu sehen. Besonders auffallend ist es am ChromeBook.
Besonders das Wort "Fortgeschrittene" fällt immer auf.

Ich habe schon einiges probiert, komme aber auf keinen Punkt.
Gibt es eine CSS-Angabe, die die Schrift verkleinern, vergrößern lässt, also mitwächst, so dass so etwas nicht passiert?
Bzw. wie kann ich dieses Problem auf die Schnell beheben?

Ich dachte eigentlich, dass Themes, die bei themeforest angeboten werden, die responsive Basics mitbringen.
Bei diesem Theme bin ich allerdings nur am Fehler korrigieren und anpassen.
Der Anbieter sagt nur: you need custom-css or hire someone. It would be beyound there possibilities, obwohl das theme als "responsive" verkauft wird!

Herzlichst und Danke

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Über css lassen sich die Schriftgrößen natürlich auch relativ angeben:
https://www.w3schools.com/cssref/pr_font_font-size.asp
https://www.w3schools.com/cssref/css_units.asp

b3317133

Zitat von scharf-s

.. werden einzelne Buchstaben eines Wortes einfach in eine neue Zeile gesetzt, ..

Vermutlich liegt das an den [FONT=Courier New]word-wrap[/FONT] und/oder [FONT=Courier New]word-break[/FONT] Regeln für [FONT=Courier New]body[/FONT], die sich weitervererben.

Deaktiviere für Hilfeanfragen alle Cache- und Minify-Plugins, derzeit mindestens aktiv: WP Fastest Cache, Autoptimize

scharf-s

Ok, Danke. Die besagten Plugins sind deaktiviert. Ich habe mal die Schriftgröße für die Title in den Blog-Boxen verkleinert und ein paar Wörter getrennt. Aktuell taucht der einzelne Buchstabe hier im Wort "Fortgeschrittene" noch auf.

Die möglichen Angaben für "break-word" haben speziell für dieses eine Wort "Fortgeschrittene" keine Lösung gebracht.
Ich könnte dieses eine Wort ja abändern, aber wenn dann in Zukunft wieder Beiträge mit längeren Namen veröffentlicht werden, könnte das Problem ja wieder auftauchen.

Gibt es hier noch einen Vorschlag?
Tausend Dank
Herzlichst Sandra

SEpp55

Ich würde den Platz besser nutzen! Bis 768px Breite wird die Buchungsinfo neben der Beschreibung angezeigt.
Da sind links und rechts 100px padding eingestellt. In der Buchungsinfo sind ebenfalls 40px padding eingestellt.
Das bewirkt, das für den Text wenig Platz überbleibt!
Wenn möglich sollte das über das Theme einzustellen sein.
Wennd über die Einstellungen nicht klappt, ein Versuch über den Customizer in Zusätzliches CSS:

CSS

@media all and (min-width: 768px) and (max-width: 1024px) {
.gdlr-core-pbf-column-content-margin.gdlr-core-js {
    padding: 50px 10px 0 10px !important;
}
#gdlr-core-wrapper-2.gdlr-core-pbf-wrapper {
    padding: 0 15px 50px 15px !important;
}

!!! Das ist aber für die Einzelansicht ;) z.B.: Sanftes Yoga !!!

b3317133

Zitat von scharf-s

Die möglichen Angaben für "break-word" haben speziell für dieses eine Wort "Fortgeschrittene" keine Lösung gebracht.

Code

.gdlr-core-blog-grid {
    word-break: normal;
    word-wrap: normal;
}

SEpp55

Zur Übersicht- bzw. Startseite!
Hier würde ich ebenfalls die Aufteilung zwischen 768px und 1024px ändern.
In diesem Bereich würde ich auf 2 Reihen umschalten. Über 1024px und unter 768px unverändert wie derzeit.
Da ich bei deinem /Kauf-)Theme nicht weiß, was der Pagebuilder zulässt oder ermöglicht, wieder ein CSS-Code für den Fall, das es mit Bordmitteln nicht einzustellen geht.

Code

@media all and (min-width: 768px) and (max-width: 1024px) {
.gdlr-core-column-15 {
    width: 50%;
    }
}

Für eine Silbentrennung wäre auch noch folgendes anzusehen:

Code

.gdlr-core-blog-grid-with-frame  {
    hyphens: auto;
}

Dann wären die fliegenden Buchstabe auch weg ;-)

scharf-s

super, mit diesen Scripten bin ich schon ein ganzes Stück weitergekommen. Vielen Dank....

allerdings sehe ich keine Veränderung mit diesen beiden letzten Scripten

@Media all and (min-width: 768px) and (max-width: 1024px) {
.gdlr-core-column-15 {
width: 50%;
}
}

.gdlr-core-blog-grid-with-frame {
hyphens: auto;
}

es ist dennoch viel zum Anpassen manuell....

SEpp55

Die beiden waren als noch ein 4er Grid bie 768px gegeben war!
Das erste würde ich zur Gänze entfernen. Die Wirkung siehst du zwischen 1924px und 1000px, da wird ern 2er Grid gebildet und ab 999px von deinem neuen 3er Grid überschrieben.

Das hypens war auch für die 4er Grid Variante gegen die fliegenden Einzelbuchstaben kurz vor dem Breakpoint. Da wären die langen Wörter mit Silbentrennung geteilt worden.
Mit dem 3er Grid zwischen 999px und 768px ist der Platz ausreichen und kann auch entfallen ;-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Einzelne Buchstaben in neuer Zeile

Jetzt mitmachen!