CSS media to hide/show div in mobile and desktop?

Question

I have this real code to show and hide two divs depending on device type:

Problem: in Android the #div-desktop is shown.

• I need to show only div#div-mobile on mobile devices

• I need to show only div#div-desktop on desktop devices

CSS

        @media screen and (min-width: 0px) and (max-width: 700px) {
      #div-mobile {    display: block;  }
      #div-desktop {    display: none;  }
    }

    @media screen and (min-width: 701px) and (max-width: 3000px) {
      #div-mobile {    display: none;  }
      #div-desktop {    display: block;  }

}

HTML

<div id="div-mobile">m<img width="100%" height="auto" src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" width="600" height="1067" /></div>


<div id="div-desktop">d<img width="100%" height="auto"  src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" width="1920" height="1280" /></div>

Answer 1

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">