javascriptcssobject-tag

Change Width of Object on Screen Resize

How do I use Javascript to change the width of an object when the screen is resized to a smaller width? When the screen is resized back to the bigger size, I want the bigger object.

Solution

  • The best way to handle an object size in a responsive screen is through a relative size on css, like vihan1086 said. This could be made like this:

    <div style="width: 75%">My Content</div>

    This would make this element fill 75% of the screen, no matter the size of the screen.

    If you really want to do that in JS, you could do something like this with the help of jQuery

    $(window).resize(function() {
  var window_width = $(window).width();
  if(window_width < 300) {
    $("#myDiv").width(100);
  }
});