How do I make a div not display, if the browser window is at a certain width?

Question

I want some images to not be displayed if the persons browser window is too small. Would I do this in CSS or Javasript, and if so, how?

div.style.display = 'none'; – Prasath K May 09 '13 at 10:11 — Prasath K, May 09 '13 at 10:11
@PrasathK: "if the persons browser window is too small". – Paul D. Waite May 09 '13 at 10:17 — Paul D. Waite, May 09 '13 at 10:17
@PrasathK: an `if` isn't a loop. – Paul D. Waite May 09 '13 at 10:25 — Paul D. Waite, May 09 '13 at 10:25

score 10 · Accepted Answer · answered May 09 '13 at 10:12

10

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

answered May 09 '13 at 10:12

SeinopSys

8,787
10
62
110

Is that dynamic, so will change each time the user resizes the window? – Paul C May 09 '13 at 10:12

score 2 · Answer 2 · answered May 09 '13 at 10:12

2

You don't have to use JavaScript, you can simply do it with CSS @media queries

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

answered May 09 '13 at 10:12

Mr. Alien

153,751
34
298
278

score 2 · Answer 3 · edited May 23 '17 at 11:44

You can do this 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 specific device or all like screen alone, affect in print , mobile device etc or all

For doing this in javascript/jquery refer the below post,

How to detect in jquery if screen resolution changes?

I'm *pretty* sure it's called @media *query* – SeinopSys Aug 02 '14 at 05:22 — SeinopSys, Aug 02 '14 at 05:22

How do I make a div not display, if the browser window is at a certain width?

3 Answers3

Linked