Hide Div on Mobile Devices, Using CSS

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;
  }
}

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

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>

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

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

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.

How to hide element for mobile device with bootstrap4?

Currently it is possible to hide the element with .d-none for all
devices but I only want to hide it for xs and sm.

This should work for you

<div class="d-none d-md-block">
...
</div>

Bootstrap 4.x display cheat sheet

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Also check my answer on a related question - Hiding elements in responsive layout?

---

Related Topics