Skip to main content

Unser Responsive Content Shortcode bietet dir die Möglichkeit, Inhalte teilweise nur für bestimmte Endgeräte anzuzeigen. So können etwas Beschreibungstexte auf dem Smartphone zusammengefasst ausgegeben werden, um die Seite nicht zu lang erscheinen zu lassen.

Responsive Content ist gerade in aller Munde und je nach Projekt sollte man diesen Punkt definitiv nicht vernachlässigen. Gerade im Modebereich ist die Zahl der Mobilen User mittlerweile über dem der Desktop-Anwender und wenn du dann einen 2.000 Wörter Artikel zum Thema „rote Damen Pumps“ auf deiner Seite hast, wird es einen Benutzer sehr schnell vergraulen. Daher haben wir uns etwas einfallen lassen: Zwei Shortcodes zum Anzeigen und Verstecken von Inhalten je nach Browserauflösung.

hidden-Shortcode

Code

[pastacode lang=“php“ manual=“%26%23091%3Bhidden%20screen%3D%22xs%22%5DDieser%20Text%20wird%20nur%20bei%20einem%20Smartphone%20nicht%20angezeigt!%26%23091%3B%2Fhidden%5D%0A%26%23091%3Bhidden%20screen%3D%22lg%22%5DDieser%20Text%20wird%20nur%20bei%20einem%20gro%C3%9Fen%20Desktop%20nicht%20angezeigt!%26%23091%3B%2Fhidden%5D“ message=““ highlight=““ provider=“manual“/]

Attribute

Für alle verfügbaren Klassen schaue bitte unter http://holdirbootstrap.de/css/#responsive-utilities

Name Inhalt Bedeutung
screen xs Wird auf allen Geräten ausgeblendet, die via Prefix definiert sind. (xs, sm, md, lg)
display block, inline, inline-block siehe: hier

visible-Shortcode

Code

[pastacode lang=“php“ manual=“%26%23091%3Bvisible%20screen%3D%22xs%22%5DDieser%20Text%20wird%20nur%20bei%20einem%20Smartphone%20angezeigt!%26%23091%3B%2Fvisible%5D%0A%26%23091%3Bvisible%20screen%3D%22lg%22%5DDieser%20Text%20wird%20nur%20bei%20einem%20gro%C3%9Fen%20Desktop%20angezeigt!%26%23091%3B%2Fvisible%5D“ message=““ highlight=““ provider=“manual“/]

Attribute

Für alle verfügbaren Klassen schaue bitte unter http://holdirbootstrap.de/css/#responsive-utilities

Name Inhalt Bedeutung
screen xs Wird auf allen Geräten angezeigt, die via Prefix definiert sind. (xs, sm, md, lg)

War dieser Artikel hilfreich?

1 Star2 Stars3 Stars4 Stars5 Stars
2,50 / 5

Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*
*