Hide div if screen is smaller than a certain width

Question

I want to hide a floating div if the user screen is  lt  1024px as it will overlay with my blog content area  I found this jQuery on the net but I am not sure how to use it     document  ready function      if   screen width gt 1024            if screen size is 1025px wide or larger         yourClass   css  display    none       you can also use     yourClass   hide      elseif   screen width lt  1024             if screen size width is less than 1024px         yourClass   css  display    block       here you can also use show            If my floating div class name is sharecontent  should I replace the above script like below  If yes  it s not working     document  ready function      if   screen width gt 1024            if screen size is 1025px wide or larger         sharecontent   css  display    none       you can also use     yourClass   hide      elseif   screen width lt  1024             if screen size width is less than 1024px         sharecontent   css  display    block       here you can also use show            I also tried replacing the screen width with window width but still no success

User · Answer

The problem with your code seems to be the elseif-statement which should be else if (Notice the space).

I rewrote and simplyfied the code to this:

$(document).ready(function () {

    if (screen.width < 1024) {
        $(".yourClass").hide();
    }
    else {

        $(".yourClass").show();
    }

});

User · Answer

The problem I was having is my css media queries and my IF statement in Jquery clashing  They were both set to 700px but one would think it s hit 700px before the other   To get around this I created a empty Div right at the top of my HTML outside my main container    lt div id  max-width  gt  lt  div gt    In css I set this div to display none    max-width           display  none          In my JS created a function  var hasSwitched   function          var maxWidth   parseInt     max-width   css  max-width    10       return  isNaN maxWidth        So in my IF statement instead of saying if  hasSwitched lt 700  perform the following code  I did the following  if   hasSwitched      Your code     else  your code      By doing this CSS tells Jquery when it s hit 700px  So css and jquery are both synchronized    rather than having a couple of pixels difference  Do give this a try peeps it shall definitely not disappoint   To get this same logic working for IE8 I used the Respond js plugin which also definitely works  It lets you use media queries for IE8  Only thing that wasn t supported was the viewport width and viewport height    hence my reason to try get my css and JS working together  Hope this helps you guys

User · Answer

Use media queries  Your CSS code would be    media screen and  max-width  1024px         yourClass           display  none  important

User · Answer

I have the almost the same situation as yours  that if the screen width is less than the my specified width it should hide the div  This is the jquery code I used that worked for me     window  resize function        if    this  width    lt  1024             divIWantedToHide   hide         else            divIWantedToHide   show

User · Answer

Is your logic not round the wrong way in that example  you have it hiding when the screen is bigger than 1024   Reverse the cases  make the none in to a block and vice versa

[jquery] Hide div if screen is smaller than a certain width

Examples related to jquery

Examples related to hide

Examples related to resolution

Examples related to show