0
<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?

3 Answers 3

2

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

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
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.