To show a hidden div using css in mobile view

Question

This is my div content:

<div style="display:none;" id="sidebar">
<ul  class="nav navbar-inverse" style="list-style:none;">
<li><a href="#ccc">ccc</a></li>
<li><a href="#bbb">bbb</a></li>
</ul>
</div>

I hide it by default using the inline style. Now what I want is, to show this div only in mobile view.

I tried like this:

@media only screen and (max-width: 990px) {
        #sidebar { 
         display: block;
        }
      }

But it is not showing the div, it's still hidden. How do I make this visible only in the mobile view?

Give me some suggestions.

Check this [http://stackoverflow.com/questions/11796297/div-show-hide-media-query](http://stackoverflow.com/questions/11796297/div-show-hide-media-query) — Ganesh Salunkhe, Mar 18 '15 at 07:56
Maybe take the inline style out and put it in as a class and then override that class in your media screen. — James111, Mar 18 '15 at 07:57

score 2 · Answer 1 · edited Feb 14 '19 at 16:58

2

You can use !important to override a CSS rule but this is not so easy to maintain. :)

edited Feb 14 '19 at 16:58

a stone arachnid

1,272
1
15
27

answered Mar 18 '15 at 07:58

hornfl4kes

120
1
10

Yes, that's why i said not easy to maintain. – hornfl4kes Mar 18 '15 at 08:37

score 2 · Answer 2 · answered Mar 18 '15 at 08:01

The inline style will override any styles in your stylesheet. I wouldn't reccomend using !important, as it can be a nightmare to maintain.

Simply take out your inline style:

<div id="sidebar">
  <ul  class="nav navbar-inverse" style="list-style:none;">
    <li><a href="#ccc">ccc</a></li>
    <li><a href="#bbb">bbb</a></li>
  </ul>
</div>

Then put this in your stylesheet:

#sidebar { 
  display: none;
}
@media only screen and (max-width: 990px) {
  #sidebar { 
    display: block;
  }
}

yes, its nice idea. Please don't use inline in normal case. – Ram kumar Mar 18 '15 at 08:05 — Ram kumar, Mar 18 '15 at 08:05

Alexandros · Answer 3 · 2019-02-15T13:59:47.340

Remove inline style from your content like so:

<header class="main-header">
  <div class="banner mobile_hide" role="banner">
    <img src="exemple_image_banner.jpeg" alt="Exemple Image Banner"/>
  </div>
</header>

Add this in your stylesheet:

/* --- Hidden viewport --- */
@media only screen and (max-width: 700px) {
    .mobile_hide { display:none; }
}
@media (min-width:701px) and (max-width:1199px) {
    .tablet_hide { display:none; }
}
@media only screen and (min-width: 1200px) {
    .desktop_hide { display:none; }
}

To show a hidden div using css in mobile view

3 Answers3