How to make div not display if browser window has a certain width?

Question

I want some images not to be displayed if the browser window of faces is too small. I would do it in CSS or Javasript, and if so, how?

Answer 1

@media all and (max-width: 500px){ /* max screen size */ #div { display: none; } } 

Answer 2

You do not need to use JavaScript, you can just do it with CSS @media queries

 @media all and (max-width: 699px) { /* Change Width Here */ div.class_name { display: none; } } 

Answer 3

You can do it in css using @media tags

  /*Show images for resolution greated than 1024*/ @media only screen and (min-width: 1024px) { img{ /*show all images*/ display:block; } } /*hide images for resolution lesser than 1024*/ @media only screen and (max-width: 1024px) { img{ /*hide all images*/ display:none; } } 

In @media tags, you can target a specific device or everything as on a screen , affect printing , a mobile device, etc. or all

To do this in javascript / jquery, refer to the following article,

How to detect in jquery if screen resolution changes?