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>