Wie kann man Inhalte ab einer bestimmten Browsergröße einblenden?

  • Ich finde es enorm schwer, Seiten durchgängig so zu layouten, dass es sowohl am Desktop als auch auf Tablet und Smartphone gut aussieht. Daher möchte ich Elemente (Artikel, Spalten oder Reihen) abhängig von der Größe des Browserfensters durch Varianten ersetzen. Ich finde aber nur die Funktion "Reihe ausblenden, wenn Größe < xy", keine umgekehrte Funktion "Reihe einblenden, wenn Größe > xy". Fehlt diese Funktion komplett? Falls ja, warum? Oder wichtiger: Kriege ich das z. B. mit Inline-CSS hin?

    Nochmal zur Verdeutlichung - ich möchte sowas machen:

    if (Größe des Browserfensters > 768)

    Variante A (Bild, Artikel etc.)

    else

    Variante B (Bild, Artikel etc.)

    Es soll also nicht nur was wegfallen, wenn das Browserfenster kleiner wird (das geht ja), sondern es soll durch was anderes ersetzt werden.

    Danke für die Unterstützung!

    Markus

    • Hilfreichste Antwort

    Salut Markus L.

    Mit Bordmitteln ist es nicht möglich, Inhalte ab einer bestimmten Bildschirmgösse durch alternativen Inhalt ersetzen, bzw. anzeigen zu lassen.

    Am ehesten würde ich Dir zur Probe die Lösung von phil-web empfehlen (da phil-web weiss was er tut, im Gegensatz zu mir).

    Wenn Du versiert genug bist, darfst Du gerne auch meine Lösung studieren. Du findest diese im Quellcode auf dieser Seite ab Zeile 50 bis 52 – und wirkt sich in diesem Fall lediglich auf das Bild im Bannerbereich aus (ersetzt die Reihe). Hier ist aber ausdrücklich anzumerken, dass der betreffende Code sich auch auf den LiveView von ZP auswirkt! Dies kann dazu führen, dass der ausgeblendete Bereich per LiveView nicht mehr (intuitiv) erreicht werden kann, oder andere Nebenwirkungen auftreten (im Notfall F8 drücken).

    Auch wichtig ist zu erwähnen, dass (mit dieser/diesen Methode/n) ausgeblendeter Inhalt für Suchmaschinen lesbar bleibt und dem User als Suchergebnis angezeigt wird.

    Viel Erfolg und gute Tage.

    Viele Grüsse

    elch

    Zeta Producer 17.x - Express

    Website, zu einer nicht primär gewinnorientierten und/oder ernst zu nehmenden Nebentätigkeit: Heubeere.ch ;)
    (PS: "ß" gibt es nicht - und kann ich nicht. Sorry!)

  • Lieber Elch,

    besten Dank – you made my day :)

    Ich bin (sorry dafür) dann doch direkt zur Lösung von phil-web gegangen, dem CSS-Spezialisten. Kannte zwar das @media-Konstrukt und dass darin die Lösung liegen muss, habe aber bisher nur Inline-CSS verwendet. Das Definieren von Klassen unter "Einstellungen" und deren Verwendung beim Element überstieg mein Know-how. Und das hat nun direkt geklappt.

    Jetzt habe ich die volle Kontrolle - nochmal herzlichen Dank für deinen entscheidenden Hinweis!

    Viele Grüße

    Markus

  • Prima!

    :thumbup: :thumbup: :thumbup:

    Eine gute Zeit und viele Grüsse

    elch

    Zeta Producer 17.x - Express

    Website, zu einer nicht primär gewinnorientierten und/oder ernst zu nehmenden Nebentätigkeit: Heubeere.ch ;)
    (PS: "ß" gibt es nicht - und kann ich nicht. Sorry!)

Jetzt mitmachen!

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