popup position update based on screen width

Question

I am trying to change the position of popup if screen width is less than 568px through media queries, but somehow its not working.. Here;s the code: CSS:

<style type="text/css">
            #wrapper
            {
                left: 300px;
                position: relative;
                width:500px;
            }

            .popup
            {
                display:none;
                width:300px;
                border:1px solid red;
                padding: 10px;    
                position: absolute;
                margin: 10px 0 0 0px;
            }
            @media only screen and (max-device-width : 568px) {
            .popup
                {
                   margin: 10px 0 0 -180px;
                }
            }
        </style>

HTML:

<div id="wrapper">
        <a href="#" class="def">What is Lorum Ipsum?</a>
        <div class="popup">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
        </div>
    </div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script>
    $(".def").click(function(){
        $(".popup").toggle();
    });
    </script>

Here's the jsfiddle link: http://jsfiddle.net/0sfve6t3/2/

Appreciate your feedback/inputs

Answer 1

try jquery:

if($(window).width() < 568){
  $('.popup').css('margin','10px 0 0 -180px');
}

try css :

@media only screen and (max-width: 567px){
 .popup{margin: 10px 0 0 -180px;}
}