1 {{ upvoteCount | shortNum }}
1 {{ upvoteCount | shortNum }}

Using media queries with display:none

by dgmufasa
1 replies
Hi,

Is this a good / bad idea when working with websites?

Basically, suppose you have to display an image of a certain size. It looks great on a large screen but crappy on a smartphone.

So, what you do is change out the image (big one for a small one) with the media query as your "cue" so to speak as to which one to use.

I have seen this done with the "tap to call feature" - so - at with the large page, no button - but - at the mobile page, the button appears (allowing the user to call).

Also, I have seen it used when showing a "wait icon" - as part of AJAX replies.

Is it too much to expect for this to be used with forms (for example). Have one form be displayed and when getting to a mobile device, use a different form?

TIA
#displaynone #media #queries
  • Profile picture of the author David V
    It's common, but a bad idea.
    The content becomes "inaccessible" to screen readers.
    Don't underestimate the importance of "Accessibility" in web development.
    Take a look at this: Places It's Tempting To Use Display: None; But Don't | CSS-Tricks for a heads up regarding this.

    A well coded responsive site will have no problem on mobile devices and can look different then on the desktop.
    {{ DiscussionBoard.errors[9520900].message }}

Trending Topics