I need to hide some HTML
contents from the screen when the devices are changing. That mean I am trying to create a responsive design. In small screen sizes (below 768px) I want to hide some contents.
My contents something like this -
<div class="content-to-hide">
<div class="container">
<a class="banner-brand visible-sm visible-md visible-lg" href="index.html">
<img src="" alt="" width="280">
</a>
<div class="utility-nav">
<ul>
<li><a href="#" id="example" data-toggle="tooltip" data-placement="left" title=""><i class="icon fa fa-users fa-lg"></i><br /><span>xxxxxxxxxxxxxx</span></a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-unlock-alt fa-lg"></i><br /><span>Sign in</span></a></li>
</ul>
<h2><i class="icon fa fa-phone-square"></i> <span>Hot Line</span>xxx-xxx-xx-xx</h2>
</div><!-- /.utility-nav -->
</div><!-- /.container -->
<div class="hr"><hr /></div>
</div>
So I want to hide this contents from small and extra small size screen devises.
I tried it using LESSCSS
but no luck
@media (max-width: (@grid-float-breakpoint - 1)) {
.content-to-hide {
display: none;
}
}
Hope someone will help my out.
Thank You.
To hide an element in a responsive layout, we need to use the CSS display property set to its "none" value along with the @media rule. The content of the second <p> element having a "hidden-mobile" class will be hidden on devices smaller than 767px.
d-none d-md-block to hide on small and extra-small devices.
For the purpose of hiding elements with media queries you simply have to set their display to none inside the specific media query.
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
why not use
@media (max-width: 767px) {
.content-to-hide {
display: none;
}
}
if you want to hide the content for screen-size below 768px
I'd go with Kyojimaru's response. Another option could be to use layout selectors. For example.
@media (orientation:portrait) {
.my-element {
display: none; /* visibility: none; */
}
}
@media (orientation:landscape) and (max-width: 767px) {
.my-element {
display: none; /* visibility: none; */
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With