css - Hide content from small and extra small screen size devises -
i need hide html
contents screen when devices changing. mean trying create responsive design. in small screen sizes (below 768px) want hide contents.
my contents -
<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 want hide contents small , small size screen devises.
i tried using lesscss
no luck
@media (max-width: (@grid-float-breakpoint - 1)) { .content-to-hide { display: none; } }
hope out.
thank you.
why not use
@media (max-width: 767px) { .content-to-hide { display: none; } }
if want hide content screen-size below 768px
Comments
Post a Comment