CSS media to hide/show div in mobile and desktop?
I have just checked the live link.
Meta tag is missing for responsive devices.
Add the below code for detecting mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT After seeing your site, you need to add:
<meta name="viewport" content="width=device-width, initial-scale=1">
You can just use min-width
Also, don't use width/height html tags in img use CSS instead
img {
max-width: 100%
}
#div-desktop {
display: none;
}
@media screen and (min-width: 701px) {
#div-mobile {
display: none;
}
#div-desktop {
display: block;
}
}<div id="div-mobile">m<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" /></div>
<div id="div-desktop">d<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" /></div>