- This topic is empty.
October 9, 2013 at 2:50 am #152427asmaParticipant
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?October 9, 2013 at 2:59 am #152428jaycrispParticipant
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.October 9, 2013 at 3:14 am #152429asmaParticipant
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? …October 10, 2013 at 12:48 am #152550jaycrispParticipant
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.October 10, 2013 at 3:59 am #152568TheTechBoxParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.