Question

I have this jQuery function:

    $(window).resize(function(){
  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: ($(window).height() - $('#modal').outerHeight())/2
  });
});

This does what I need to: “places the div on the center of the screen on window resize”. The only problem is that when I shrink the window enough (at 400-500px) or access the webpage from a low-resolution device (mobile phone), the heading gets out of the boundaries upside and you can’t see it anymore.

Why this happens and how I can avoid that?

Answer 1

You can just add a small test :

$(window).resize(function(){
  var topPos = ($(window).height() - $('#modal').outerHeight())/2;

  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: topPos > 0 ? topPos : 0
  });
});