Introduce something linke
class="nomobile-narrow"
That may be applied to informative elements, like icons, which are basically helpful, e.g. as additional eye-catcher on navigation, but consuming too much space on narrow devices.
- It is expected that the same information condensed within an icon is presented as textual explanation in detail anyway.
- The same consideration is made on accessibility: A redundant icon shall be suppressed by screenreaders if just drawing attention and does not provide more information than the subsequent textual element is telling.
Nowadays, mobile devices with rather wide screen but still not desktop are disseminating.
- The old handhelds of first generation had ony a few 100 pixels.
- A tablet may be run with a desktop skin, not using mobile.
- Now we find intermediate devices; too small for a desktop skin, requiring MinervaNeue, but wide enough to show eye-catching icons.
While
class="nomobile"
will suppress everything, even not deliver elements via network,
class="nomobile-narrow"
may be implemented by CSS
@media only screen and (max-width:720px) { .nomobile-narrow { display:none !important; } }
While dedicated to mobile the same consideration goes for desktop, but small windows are not frequently expected there.