Responsiver Text

  • Hallo Mario,

    ist es sinnvoll dein Widget "Text responsive" zu verwenden, um Überschriften oder in Ausnahmefällen auch normalen Text bei der Ansicht auf mobilen Endgeräten automatisch verkleinert darzustellen oder schlägst du eine andere Lösung vor?

    LG Robert

    • Offizieller Beitrag

    Natürlich macht es Sinn das Widget "Text Responsive" hierzu zu verwenden.


    Wenn die gleichen Einstellungen aber für mehrere Überschriften oder Texte verwendet werden sollen macht es mehr Sinn dies mit über eine zusätzliche CSS-Klasse zu realisieren, damit das CSS nur ein mal im Code erscheint .


    Wenn du zum Beispiel mehrere "H2 Überschriften" hast welche sich gleich verhalten sollen könntest du das folgendermaßen umsetzen.


    In folgendem Beispiel sollen mehrere Überschriften H2 im Text-Artikel diese Einstellungen erhalten:

    • Schriftgröße: 58px
    • Bildschirmbreite unter 1000px, Schriftgröße: 38px
    • Bildschirmbreite unter 800px, Schriftgröße: 28px
    • Bildschirmbreite unter 600px, Schriftgröße: 22px


    Einstellungen > CSS

    CSS
    <style>
    .textresp h2 {font-size:58px}
    @media (max-width: 1000px) {.textresp h2 {font-size:38px}}
    @media (max-width: 800px) {.textresp h2 {font-size:28px}}
    @media (max-width: 600px) {.textresp h2 {font-size:22px}}
    </style>

    In den entsprechenden Text-Artikeln gehst du unten auf das "Mischpult", dann auf "Mehr" und gibst dort unter CSS-Klasse: textresp ein.

  • Hallo Mario,

    in den CSS-Einstellungen habe ich schon umfangreiche Einträge, die sich auf deine Widgets beziehen (s.u.). Setze ich deine Zeilen 2 bis 5 einfach in diesen Bereich ein, egal an welche Stelle und mit der Klammer getrennt? Und im zweiten Schritt werde ich in jeden Artikel den es betrifft die CSS-Klasse manuell eintragen?


    <style>

    .wzp-footfix {

    position:fixed;

    left:0;

    bottom:0;

    height:auto ;

    width:100%;

    z-index:20000;

    }

    .wzp-spalten{

    text-align: center;

    text-decoration: none;

    opacity: 1;

    transition: opacity 0.2s !important;

    }

    .wzp-spalten:hover {

    opacity: 0.6;

    }

    a.wzp-spalten {

    text-decoration: none;

    }

    .wzp-icon {

    position:relative;

    top:2px;

    padding-right:7px;

    }

    .wzpgrid5{ width: 20%; float: left;}

    .wzpgrid4{ width: 25%; float: left;}

    .wzpgrid3{ width: 33.33%; float: left;}

    .wzpgrid2{ width: 50%; float: left;}

    </style>