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

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -