Hiding Div If Using Mobile Browser

Hiding DIV if using mobile browser

you can alos use this minified jQuery snippet to detect if your user is viewing using a mobile device ; jQuery.browser.mobile

• jQuery.browser.mobile will be true if the browser is a mobile device

You can try this code :

   <script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { 
        alert("MOBILE DEVICE!!");
        $('.navWrap').css('display', 'none'); // OR you can use $('.navWrap').hide();
    } 
    else 
    { 
       alert("NOT A MOBILE DEVICE!!"); 
    }
</script> 

Hiding div on mobile devices only

It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:

The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:

1. Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.

2. Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.

E.g.:

<script>
    $(document).ready(function() {
        var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
        $('.test').css('display', 'none');
    });
</script>

hide div tag on mobile view only?

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.

How do I hide a DIV when I switch to mobile dimensions?

Bootstrap has classes for this sort of thing. Use them individually or in combination to achieve the desired result.

hidden-xs

http://getbootstrap.com/css/#responsive-utilities-classes

How to hide div when mobile

Maybe he is new to html and css...
Try to use css rules to achieve this, like Robert said media queries.
Put in your html head this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And in your css file wirte below your div-rules (lets say your div has the id="test"):

@media only screen and (min-width: 800px) {
    #test {
       display: none;
    }
}

Now the div is hidden when the screen width is larger than e.g. 800px.

Hiding div in mobile-view not working in HTML

After going through your source code online, this is what you actually have, inline:

<style>
@media screen and (max-width: 600px) {
  #kingg img { display: none !important; }

}
</style>

This is working as expected, hiding the image in that div.
So the code you posted is bound to work, as it doesn't seem to have any syntax errors or anything.

So i would say to make sure you are uploading the file you are editing or edit the file in the server directly.

Hide div on mobile devices, using CSS

For some reason (unknown to me) this worked:

<div  class="mobile-hide">
<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>

---

Related Topics