Show and Hide depend on screen size

Question

<style>
@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content{ display: none; }  /* show it on large screen */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content{ display: block; }   /* hide it small screens */
}
<style>
<div id="my-content">

This code works but I want to add a button for show/hide this "my-content" on small device. I don't want to show this button in large display. This button only show on small screen. I want to use this code with a bootstrap site.

I think you'd want to add few more tags to your question. Like the programming language, the platform, etc. — SHG, Jun 12 '17 at 18:01
Can you please show me all code....i am not a expert about this ... — Anik Chakraborty, Jun 13 '17 at 15:07
Check this link https://stackoverflow.com/questions/2777139/how-to-use-jquery-to-show-hide-divs-based-on-radio-button-selection — toiglicher, Aug 08 '17 at 18:13

score 6 · Answer 1 · answered Aug 08 '17 at 18:10

You just did the opposite of what you wanted to. Here is a quick fix:

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content{ display: block; }  /* show it on smaller screen */
}
@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content{ display: none; }   /* hide it on larger screens */
}

<div id="my-content">
Shows only on screens having max width of 400px. 
Resize your browser's width to see changes
</div>

score 0 · Answer 2 · answered Jun 12 '17 at 20:05

0

Bootstrap already has classes to hide things/make them visible. Check to see if these are in your style sheet. http://getbootstrap.com/css/

.visible-xs-, .visible-sm-, .visible-md-, .visible-lg- .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg

answered Jun 12 '17 at 20:05

Harley

385
1
2
11

Show and Hide depend on screen size

2 Answers2