Div show/hide media query - mobile

Question

What code can I use to make a particular div show only if on a mobile width?
I have a 100% width full div at the top of my screen, would like it to only show when the device is specified as a mobile width.

Answer 1

I'm not sure, what you mean as the 'mobile width'. But in each case, the CSS #media can be used for hiding elements in the screen width basis. See some example:
<div id="my-content"></div>
...and:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content { display: none; } /* hide it elsewhere */
}
Some truly mobile detection is kind of hard programming and rather difficult. Eventually see the: http://detectmobilebrowsers.com/ or other similar sources.

Answer 2

It sounds like you may be wanting to access the viewport of the device. You can do this by inserting this meta tag in your header.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 3

Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
#my-content{
width:100%;
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
#my-content{
width:100%;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
display: none;
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
// Havent code only get for more informations
}