How to show hidden button with css media query?

Tags: css3,media-queries

Problem :

I have a hidden button it's means display:none. I tried with this.

@media screen and (max-width:1360px) {
#a10{display:none;}
#menu_btn{display:block;}
}

---

Solution :

following code means: "display #menu_btn as inline-block when screen is more or equal to 1360, hide it when screen is less than 1360"

HTML:

<input id="menu_btn" type="button"/>

CSS:

@media screen and (min-width:1360px) {
  #menu_btn { display:inline-block; }
}
@media screen and (max-width:1359px) {
  #menu_btn { display:none; }
}

PS. remember that you cannot set inline style in html like this: <input id="menu_btn" type="button" style="display:none"/> because it will override style from media query and your button will not be displayed no matter what the screen size will be.