title: How can i change my css according to the screen width of a mobile device
body: <p>I'm trying to to apply a different css style to my websites as soon as the width of the document is lower than 700px and again when its lower than 500px (smartphone). The code I have is the following, what do I do wrong?</p>
  
  <pre><code>if($(document).width() &lt; 749) {
      if($(document).width() &lt; 700) {
          $('#cirkelcontainer').hide();   
          $('h3').css('word-wrap', 'break-word');
          $('.datum').css('width', '100%');
          $('.datum').css('color', 'black');
          $('.datum').css('margin-top', '13px');
          $('.datum').css('background-color', 'white');
          $('.datum').css('word-wrap', 'break-word');
          $('.datum').css('height', 'auto');
          $('.datum').css('margin-left', '-2%');
          $('#nieuwsnavlinks').css('width', '90%');
          $('#nieuwsnavlinks p').css('text-align', 'center');
          $('#nieuwsnavrechts').css('width', '228px');
          $('#nieuwsnavrechts').css('margin-left', 'auto');
          $('#nieuwsnavrechts').css('margin-right', 'auto');
          $('#nieuwsnavrechts').css('float', 'none');
          $('content').css('padding-bottom', '25px');
      }
  
      if($(document).width() &lt; 500) {
          $('button').css('width', '100%');
          $('form button').css('width', '125px'); 
          $('#datum:nth-child(n)').hide();
          $('#nieuwsoverzicht:nth-child(n)').css({
              'width': '100%',
              'height': 'auto',
              'float': 'left'
          });
          $('nav ul ul li').css('border-left', '1px dotted black');
          $('#nieuwsoverzicht:nth-child(n) p').css('word-wrap', 'break-word');
          $('h4').css('word-wrap', 'break-word');
          $('content').css('width', '100%');
          $('.nieuwstext:nth-child(1)').find('a').html('&amp;#x25C0;');
          $('.nieuwstext:last').find('a').html('&amp;#x25B6;');
          $('#nieuwsnavrechts').css('width', '162px');
      }
  }
  </code></pre>
  
  <p>EDIT: works perfect in a normal browser</p>