SpecialDifferent mobile/desktop content
A wrapper you can use to show different content on a mobile versus a tablet and desktop. Can be used to show a portrait infographic on a mobile and a landscape version on a desktop.
Variations
?
There are two images below, one only visible on a tablet and desktop, the other only visible on mobile devices.
Details
Usage
Can be used inside or over any component or components. Simply add a mobile-hidden class to hide the element on mobile devices, and add a mobile-only class to hide an element on tablets and desktops.
Guidelines
- Can be used everywhere
HTML structure
Overall HTML view of a random group:
HTML file (.html)
(other element)
(other element) (optional)
*.mobile-hidden
(other element) (optional)
*.mobile-only
(other element) (optional)
(other component(s))
Presets
Table with presets:
| Preset | Description |
|---|---|
| Default | Example of how to show different infographics depending on device size. |
Variations
Table with variations:
| Variation | Description |
|---|---|
| Random paragraph | Example of how to show different infographics depending on device size. |