Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hide image In responsive web design layout.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #152427
    asma
    Participant

    I want to hide an image only when it is viewed from mobile or tablets.what is the best way to do it.
    is it oky to use diplay:none property for the div containing image?

    #152428
    jaycrisp
    Participant

    Are you hiding the image to save on bandwidth for mobile/tablet? If so, display:none will probably still load the image.

    A better option may be to no have the tag in the html, then dynamically load it in for higher res devices.

    #152429
    asma
    Participant

    no there is no bandwidth issue just need space for text, thats why hiding an image.but ofcurse loading is an issue any other way to do it with css? …

    #152550
    jaycrisp
    Participant

    Another way would be to have it as a background-image in the CSS, and only show this when the device width is over a certain size, using a media query.

    I’ve made an example on codepen.

    You’d need to do some testing to see if this loads or not on mobile devices. I imagine this is a bit of a minefield though as there are many and they all behave differently.

    #152568
    TheTechBox
    Participant

    As mentioned above using background-image would theoretically be the easiest way to implement it. For a while now I have either used display none or just used a background image to load it when needed.

    I have seen some Javascript examples but that does seem counter intuitive to load JS just to hide/show an image.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.