Hide Parts of Site on Mobile Devces

Hide part of website on mobile device

Add this to your css:

@media screen and (min-width: 0px) and (max-width: 400px) {
    #order{
        display:none;
    }
}

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 to hide elements in mobile devices? CSS

Try this:

@media (min-width: 100px) and (max-width: 950px){
sidebar__area:last-child .widget:last-child, .sidebar__area.is_stuck .widget:last-child{
    display:none;
    }

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?

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>

---

Related Topics