How to Hide or Show Content with CSS Depending on Screen Size

Hide div element when screen size is smaller than a specific size

You can do this with CSS:

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

We're using max-width, because we want to make an exception to the CSS, when a screen is smaller than the 1026px.
min-width would make the CSS rule count for all screens of 1026px width and larger.

Something to keep in mind is that @media queries are not supported on IE8 and lower.

Show/Hide a div according to screen size HTML/CSS

If you want to hide this div in all the devices that have a max-width of 768px, just use this,

@media (max-width: 768px){
  .side-menu {
    display: none;
  }
}

How do I hide or show content with CSS depending on screen size?

I copied the following CSS classes from Bootstrap 4 Alpha into my project and they work perfectly.

.invisible {
  visibility: hidden !important;
}

.hidden-xs-up {
  display: none !important;
}

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

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}

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

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important;
  }
}

.hidden-xl-down {
  display: none !important;
}

Docs:
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Hiding and showing element based on screen size

You need to add !important to the CSS property, like:

 #menu { display:block!important; }

Your Javascript adds style attribute to the element, which has higher priority than any internal or external CSS styles, unless they "are" !important.

What you can also consider doing to avoid that is to toggle some CSS class in your Javascript instead of setting style attribute. This way you avoid using !important.

CSS Change Content Based on Screen Size

You need to put that @media css below the .notice css.

<div class="wrapper">
  i am wrapper
</div>
<div class="notice">
  i am notice
</div>

.notice {
  display: none;
  visibility: hidden;
}

@media screen and (max-width:900px), screen and (max-height:500px) {
    .wrapper { display: none !important; }
    .notice  { display: block; visibility: visible; }
}