My css bootstrapclass ".hidden.xs" not working

user_18777957 0
Viewed 37

This is supposed to show no icons in mobile device.

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

so this "Menu" gotta be hidden, but its showing all these icons still.

<li>
    <a href="menu-categories.html">
        <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu
    </a>
</li>
css html
3 Answers

You've added the hidden-xs to the <br> element instead of the span.glyphicon. Change your code to this instead

<li>
    <a href="menu-categories.html">
       <span class="glyphicon glyphicon-cutlery hidden-xs"></span><br> Menu
    </a>
</li>
user_62142100

You have assigned <br> the target class which will not do anything. Instead add the class to the <span>

user_145330510 

@media  screen and (max-width: 767px) {
  .hidden-xs, .glyphicon{
    display: none !important;
  }
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<li>
    <a href="menu-categories.html">
        <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu
    </a>
</li>

  • @media screen and (max-width: 767px) add on screen
  • add css display:none; on both class.hidden-xs, .glyphicon
user_171890110
Related