Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide content for small and extra small screen size devices

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.

like image 270
TNK Avatar asked May 30 '14 02:05

TNK


People also ask

How do I hide the elements on my small screen?

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.

Which of the following classes should you add to hide element on extra small screens?

d-none d-md-block to hide on small and extra-small devices.

How do I hide something in media query?

For the purpose of hiding elements with media queries you simply have to set their display to none inside the specific media query.

How do I hide div in small screen in bootstrap 4?

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.


2 Answers

why not use

@media (max-width: 767px) {                  
   .content-to-hide {
      display: none;
   }
}

if you want to hide the content for screen-size below 768px

like image 150
Kyojimaru Avatar answered Sep 21 '22 18:09

Kyojimaru


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; */
   }
}
like image 34
lindsay Avatar answered Sep 19 '22 18:09

lindsay