Divs aren't aware of screen resizing

Question

First div is a category and the second div contains some photos.

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:

$(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)"
    });
  });
});

.first_div {
  transition-duration: 2s;
}

<div class="first_div col-md-1">
  //some code
</div>
<div class="second_div col-md-11>
           //some codes
</div>

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?

Answer 1

for window width I would use the following:

var my_width = document.documentElement.clientWidth * 0.7;

this is the same (cross-browser compatible) solution used by jQuery's $.width()

For more info on different methods of getting width, see this link.