title: Divs aren't aware of screen resizing
body: <p>First div is a category and the second div contains some photos.</p>
  
  <p><img src="https://i.stack.imgur.com/XcMUM.jpg" alt=""></p>
  
  <p>I wanted to do something that when user clicks on an image the first div move 0.7 of the screen width to right and all images in second div disappear, so I wrote:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("img").click(function() {
      var my_width = screen.width * 0.7;
      $(".second_div").find("img").hide();
      $(".first_div").css({
        "transform": "translate(" + my_width + "px,0px)",
        "-webkit-transform": "translate(" + my_width + "px,0px)",
        "-ms-transform": "translate(" + my_width + ",0px)"
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.first_div {
    transition-duration: 2s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="first_div col-md-1"&gt;
    //some code
  &lt;/div&gt;
  &lt;div class="second_div col-md-11&gt;
             //some codes
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When its full screen it works right, but when I resize the window and try again the first div won't be located at where it supposed to (0.7 Of screen width) What's wrong?</p>