Detecting and changing via screen width is not working

Question

So, I checked out Do something if screen width is less than 960 px to see how to execute something if the screen size was less than 960 px. However, it did not work for me. Their answer was this:

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

I tried it and it did work. I also already had an alert that told me the screen size;

var size = $(window).width();
alert(size);

and this worked, but this did not:

if (size < 1200) {
    $("#mobileVersionDetected").css("display", "block");
}
else {
    $("#mobileVersionDetected").css("display", "none");
}

Any ideas?

No need for javascript if all you are doing is hiding/showing elements. Use css media queries — charlietfl, Nov 15 '17 at 22:04
To echo @charlietfl, this is exactly what **[CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)** are for. They eliminate the need for script and are more efficient. — Scott Marcus, Nov 15 '17 at 22:09

score 1 · Accepted Answer · answered Nov 15 '17 at 22:06

1

If I add $(window).width() into the actual if function rather than using a variable it works.

answered Nov 15 '17 at 22:06

CyanCoding

1,012
1
12
35

score 0 · Answer 2 · answered Nov 15 '17 at 22:05

0

Try this:

if (size < 1200) {
    $('#mobileVersionDetected').attr("style", "display: block");
}
else {
    $('#mobileVersionDetected').attr("style", "display: none");
}

answered Nov 15 '17 at 22:05

Vijaya Pandey

4,252
5
32
57

score 0 · Answer 3 · answered Nov 15 '17 at 22:18

To echo @charlietfl, this is exactly what CSS Media Queries are for. They eliminate the need for script and are more efficient.

    /* Baseline styles applied initially: */
    body { background-color: #b200ff; /* purple */ }

    p    { 
      border:1px solid black; 
      background: white; 
      padding:5px; 
      text-align:center; 
      font:bold 1.2em Arial;

    }

    /* 
       When writing multiple media queries that don't explicitly
       specify a range, the order of the queries matter!!!

       For example:

          With a viewport of 400px wide, both of the the following 
          two queries would apply:

           @media screen and (max-width:400px) {...}
           @media screen and (max-width:600px) {...}

      So, the last one would be used. 
    */

    /*
       Note that this query uses "min-width", 
       not "max-width" so that it handles
       all viewports bigger than 1200       
    */
    @media screen and (min-width: 1201px) {
      body { background-color: orange; }
      p:after { content: "over 1200px"; }
    }

    /* 
       Here, we're using "max-width" to handle
       viewports up to the specified sizes:
    */
    @media screen and (max-width: 1200px) {
      body { background-color: yellow; }
      p:after { content: "961px to 1200px"; }
    }

    @media screen and (max-width: 960px) {
      body { background-color: blue; }
      p:after { content: "769px to 960px"; }
    }

    @media screen and (max-width: 768px) {
      body { background-color: grey; }
      p:after { content: "551px to 768px"; }
    }

    @media screen and (max-width: 550px) {
      body { background-color: green; }
      p:after { content: "321px to 550px"; }
    }

    @media screen and (max-width:320px) {
      body { background-color: red; }
      p:after { content: "up to 320px wide"; }
    }

<p></p>

Detecting and changing via screen width is not working

3 Answers3