How to make sure query animate works on all screen sizes

Question

I developed a basic html website with some animations using jquery. However I have to re-design for smaller screen sizes. My current code is:

$(document).ready(function() {
  // Animation for Flower Logo
  $('.flogo').animate({
    width: '350px',
    height: '300px'
  }, 1000);
});

If I try using jquery for screen sizes the animation stops working. For example:

// Animation for Flower Logo
$(document).ready(function() {
  var targetWidth = 768;
  if ($(window).width() &gt;= targetWidth) {
    $('.flogo').animate({
      width: '350px',
      height: '300px'
    }, 1000);
  } else {
    $('.flogo').animate({
      width: '300px',
      height: '300px'
    }, 1000);
  }
});

`>=` needs to be `<=`. Also note that if you want to make an animation work for any screen size, use a relative width, eg `%`, `vmin`, `vmax`, `vh` or `vw` — Rory McCrossan, Sep 03 '19 at 10:11
Glad to help. Also note that this can also be done with CSS alone using media queries, which will also perform much better than this JS. — Rory McCrossan, Sep 03 '19 at 10:16
Yes I understand that. But this was just a small section of the complete animation code on the page and CSS alone was not enough. But I changed most of the code to % and it helped me clean up a lot of junk code. Thank you very much for the suggestions. — Waleed Ahmad, Sep 03 '19 at 10:22

score 0 · Answer 1 · answered Sep 03 '19 at 10:27

To address multiple screen sizes, you can use css media queries as they are designed for that purpose.

Media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters.

They are a key component of responsive design. For example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.

Note that you may encounter a popular issue dealing with width. You can easily find solutions online.
$(window).width() not the same as media query

How to make sure query animate works on all screen sizes

1 Answers1