@media (max-width: xxxx } in Kombi mit @keyframes

  • Hallo,

    ein Laufband soll je nach Breite @media (max-width: xxx) jeweils unterschiedliche Werte bei 100% /text-indent: ) aufweisen:

    -450% für mobile Geräte und -100% für Desktop. Wie muss da die ANleitung lauten?


    <style>

    @keyframes marquee {

    0% { text-indent: 100% }

    100% { text-indent: -450% }

    }


    .marquee {

    width: 100%;

    margin: auto;

    padding: 5px;

    overflow: auto;

    white-space: nowrap;

    border: solid 1px #CCCCCC;

    animation: marquee 25s linear infinite;

    background-color: rgb(204, 0, 51);

    font-size: 18px;

    font-weight: bold;

    color: #ffffff;

    }


    .marquee:hover {

    animation-play-state: paused;

    }

    </style>


    <p class="marquee">TEXTETXTE TEXT .... .........!</p>


    Vielen Dank für Euro Hilfe

    AnaLisa

  • Hey,


    dafür erstellst du die Media Queries, weist diesen die erforderliche Fensterbreite zu ab wann die CSS Anweisung ausgeführt werden soll.


    1 Media Query erstellst du dann für den Desktop und 1 für mobile Geräte. In diesen weist du dann text-indent die erforderlichen Werte zu.


    Grüße,

    Stef

  • Hallo Stef,

    danke für deine Antwort. Media Querie ist klar, aber wie muss es exakt zum Beispiel für diese css-Anweisung für Desktops größer 1400 px lauten?


    @keyframes marquee {

    0% { text-indent: 100% }

    100% { text-indent: -450% }

    }


    Bei mir klappt das einfach nicht. Irgendwie übersehe ich da was.

    DANKE!!!

    AnaLisa

  • muss das den text-ident sein ?


    Du willst doch bestimmt das der marquee auf jeden Bildschirm gut zu sehen ist

    und auch durch läuft ohne mitten drinn aufzuhöhren usw oder ?


    EDIT:

    Weil dann sollte so eigentlich auch überall laufen auch ohne @media queries

    Falls du mit deinen text-ident was anderes erzielen wolltest dann ok

  • Guten Morgen,


    Beispiel für größer als 1400px:

    Code
    @media screen and (min-width: 1400px) {
      @keyframes marquee {
            0% { text-indent: 100% }
            100% { text-indent: -450% }
        }
    }


    Grüße

Jetzt mitmachen!

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