Remove Element for Certain Screen Sizes

Remove additional elements depending on screen size in JavaScript

It was picking up null objects between the images for some reason.

Then in the loop things would be indexed differently after each item was removed so had to loop backwards.

Changed it to the following and it works the way I want:

var slides = document.getElementsByClassName("trustpilot_slides");
for (var k=slides.length-1; k>=14; k--) {
    var this_slide = slides[k];
    this_slide.parentNode.removeChild(this_slide);
}

Remove elements on based on window size

Removing the element completely is not the way that the industry is going - you might want to do that still, but please consider the counter-arguments:

The element won't be showing back if the screen gets resized up over the threshold
To remove the element after the user resizes down under the threshold, you must detect this behavior with JS, which complexifies the code
The element might be useful to other parts of your code

The way that is widely adopted in the industry to change display based on size width is to use media queries. Here's a quick demo to show/hide elements based on the screen size (over or under 700px) - resize your window to make it work!

@media (max-width: 700px) {  /* mobile CSS: hide .desktop div */  .desktop {    display: none  }}@media (min-width: 700px) {  /* desktop CSS: hide .mobile div */  .mobile {    display: none  }}

<div class="mobile">  I appear only on mobile devices! (screen width less than 700)</div><div class="desktop">  I appear only on desktop devices! (screen width over 700)</div>

How to remove something in page in a certain width?

Try the @media rule in conjunction with max-width!

Your CSS might look like this:

@media (max-width:575px) {
    .remove-me {
        display: none;
    }
}

Remove div content if width of site is less than x px

You can use media query to achieve this.

@media screen and (max-width: 1000px){        
    div{
       display: none;
    }
}

The above css snippet will hide the div if the width is less the 1000px.

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.

Using JavaScript to delete div in screen size below a certain pixel

Here is a way to hide a div when the width of the screen is smaller then 700px

function myFunction(x) {  if (x.matches) { // If media query matches    document.getElementById("divIWantedToHide").style.visibility = "hidden";  } else {    document.getElementById("divIWantedToHide").style.visibility = "visible";  }}
var x = window.matchMedia("(max-width: 700px)")myFunction(x) // Call listener function at run timex.addListener(myFunction)

<div id="divIWantedToHide">tset</div>