Hide static block on mobile view!

Question

<style>
.hidden-sm-down .hidden-xs-down {
 display: none !important;
}
 </style>

 <div class="block_home_three_1 margin-top-75 hidden-sm-down hidden-xs-down">
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="block_cosmetic_one_1">
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="block_cosmetic_one_2">
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="block_cosmetic_one_3">
        </div>
    </div>
</div>

This is a static block code, I want to hide this static block for smaller screen devices and I applied this styling and used the hidden feature of bootstrap to it but it won't work. Any ideas why this isnt working?

Answer 1

You can achieve this using the following example css:

.mobile {
    display: none;
}

@media only screen and (min-width: 400px) {
    .mobile {
        display: block;
        width:400px;
    }
}

And the following example HTML

<div class="mobile">
    <p>Make me disappear when browser is under 400px</p>
</div>

Answer 2

vendor/magento/theme-frontend-blank/web/css/source/_extends.less css classes:

.abs-visually-hidden // all resolutions
.abs-visually-hidden-mobile-m // mobile
.abs-visually-hidden-desktop // desktop
.abs-visually-hidden-reset // reset

Answer 3

you shall use hidden-sm & hidden-xs as magento is still using bootstrap v3 not v4