How to make a banner responsive?

[Elindo]

Happy New Year Green Sockers! 

 

How do you make any animation responsive?   This example is on a banner.

 

So the pencode banner looks good on a laptop and computer size screen, but when I take the same animation phone size screen, then it looks too small.

 

How do you fix / compensate for the size of the drawing when showing on phones vs. computer and still show it to a decent size? .. AND I am using Bootstrap5 

 

.. AND yes, I have not been doing much animation lately, that is because I have slowly been sharpening my coding skills on whatever spare time I have at night... 

 

 

 

 

 

 

 

See the Pen vYZLjJz by Elindo586 (@Elindo586) on CodePen

[GreenSock]

That's what media queries are for (unrelated to GSAP): 

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

 

If you want to do it all in JS, check out matchMedia():

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

 

Good luck!

[james coller]

background-size: contain;

If you want to make a background image to be responsive use this in HTML Code