I want to hide a link at a certain width. How?

Question

I am trying to hide a link when the windows width becomes below 600 pixels. I have tried and I have looked for a way to do this, but so far i haven't found anything that seems to work. i tried with the:

@media screen and (max-width: 600px) {
    #hideme {
        display: none !important;
    }
}

which didn't work for me.. Feel free to check out the jsFiddle

jsFiddle

Answer 1

Your CSS media queries should work. Here is the demo: http://jsfiddle.net/nBZxc/2/

For jQuery version, you can use $(document).width() instead of document.width:

if($(document).width() > 600)
{
    $("#hideme").hide();
}

Updated Fiddle

Answer 2

if($(window).width() > 600)
{
    $("#hideme").hide();
}

Demo: http://jsfiddle.net/Zest4/

Answer 3

Hello i used media Queries for hiding you content on Window width resize

http://jsfiddle.net/nBZxc/3/

@media only screen and (max-width : 600px) {
    #hideme{display: none!important;}
} 

Answer 4

I dont have more idea about css, But you can hide element by js.

if($("#element_id").width() > 600){
  $(this).hide();
  /* or
  $(this).css('display', 'none');
  */
}