Menu
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.
839
For the purpose of hiding elements with media queries you simply have to set their display to none inside the specific media query.
You need to specify the width in pixels. Change the first line to: @media screen and (max-width: 972px) and (min-width: 100px) {... Show activity on this post.
Hiding an Image in CSS The trick to hiding any element on your web page is to insert either a " display: none; " or " visibility: hidden; " rule for that element. The " display: none; " rule not only hides the element, but also removes it from the document flow.
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.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
