Untertitel (Twenty Seventy) richtig darstellen

  • Guten Abend,

    Ich wollte fragen ob einer von euch weiss wie ich bei meiner Seite http://www.flussundfeder.de den Untertitel (plus Titel) richtig darstellen kann, auch wenn man die Seite auf einen Tablet oder Handy anschaut.

    Also statt :
    Fluss und Feder
    Shingon Reiki - Schamanische
    Geistheilung - Spirituelle
    Lebensberatung - Hypnose
    oder so was ähnliches Abgebrochenes

    Zuverlässig etwas wie:
    Fluss und Feder
    Shingon Reiki - Schamanische Geistheilung -
    Spirituelle Lebensberatung - Hypnose

    oder noch schöner:
    Fluss und Feder
    Shingon Reiki - Schamanische Geistheilung - Hypnose
    Spirituelle Lebensberatung

    Ich wäre euch dankbar für eure Antworten.
    Liebe Grüsse

    • Anzeige

    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

  • Bei noch schöner meinte ich eigentlich dass die Textvariante in die Mitte ausgerichtet/zentriert ist, also dass Fluss und Feder, schamanische Geistheilung und Spirituelle Lebensberatung unter einander stehen, und Reiki und Hypnose Links und Rechts daneben.

  • Guten Morgen,

    das lässt sich nicht so einfach umsetzen. Das ist ein Website-Untertitel, der automatisch umgebrochen wird. Um die von dir gewünschten Änderungen vorzunehmen, musst du den Untertitel vermutlich im Code manuell verankern und dann über ein CSS-Pseudoelement mit content: '\A' einen Zeilenumbruch erzwingen.
    Andere Möglichkeit, die funktionieren sollte: Über CSS die Breite des Containers mit dem Untertitel verschmälern, bis möglicherweise der Umbruch so auftritt, wie er gewünscht ist. Das dann für die Media-Queries der bekannten Breakpoints individualisieren.
    Ich weiß nicht, ob du dir das zutraust. Ansonsten antworte einfach hier drauf, dann bekommst du eine ausführliche Anleitung.
    Wenn nicht, würde ich dir zu professioneller Hilfe durch einen Webdesigner raten.

    einfach. modern. individuell.

  • Guten Morgen,
    Danke für deine Antwort.
    uhh :confused:, kannst du mir die ausführliche Anleitung schicken? ;) Vielleicht schaffe ich es dann :)

  • Erstmal die einfache Möglichkeit:
    Im Customizer -> zusätzliche CSS folgendes Einfügen:

    Code
    .site-description { max-width: 512px; }


    Bitte überprüfe mal, ob das an sich das gewünschte Ergebnis bringt oder ob es mobil anders sein soll.

    einfach. modern. individuell.

  • Mach aus dem Eintrag

    Code
    .site-description { max-width: 512px; }


    besser ein

    Code
    .site-description { max-width: 24em; }


    Dann stimmt es auch auf Handy.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Guten Abend,
    Ich habe es probiert, aber war auf dem Handy doch noch komisch abgebrochen. Ich habe aber die Reihenfolge der Wörter geändert, da klappt es dann.
    Also, auch wenn es jetzt etwas anders ist, trotzdem vielen Dank für die Hilfe !!!
    Liebe Grüsse.

  • Also wenn du noch einen Versuch mit der alten Wortreihenfolge machen möchtest habe ich noch eine Idee ;-)
    Wenn ich das richtig sehe geht es um die Beschreibungen mit 2 Wörter.
    Wenn du die Leerzeichen zwischen den zusammen gehörenden Begriffen als geschützte (harte) Leerzeichen setzt bleiben die 2 Wörter beisammen.
    Geschütztes Leerzeichen : ALT+0160
    Das kannst du natürlich auch bei der neuen Wortreihenfolge machen ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!