TOPIC: page goes tiny on tablet and phone

Hi there
My temp site is at shriek.biz/jandalbar.co.nz/index.php
The animation works fine on computer, but when I view on a tablet or cellphone it makes the whole site really tiny, like about 10% of the screen in the top left. On the phone it animates tiny and then when its finished it jumps back to the correct size. Tablet stays small till I change pages or rotate screen.
If I delete the animation code on the page it is all the right size.
Code I have is:
{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="bounceInDown"|data-eds-entry-delay="0"|data-eds-entry-duration="1"|data-eds-entry-timing="ease-out"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}
<div><img src="images/template/jandlelogo.png" alt="jandlelogo" class="responsive" style="top: 100px; position: relative; border: 0px solid #000000; display: block; margin-left: auto; margin-right: auto;" /></div>
{/edsnewanimate} {edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="slideInRight"|data-eds-entry-delay="1"|data-eds-entry-duration="2"|data-eds-entry-timing="ease-out"|data-eds-exit-animation=""|data-eds-exit-delay=""|data-eds-exit-duration=""|data-eds-exit-timing=""|data-eds-repeat-count="1"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}
<div><img src="images/template/waitress.png" alt="waitress" class="responsive" style="top: -290px; position: relative; border: 0px solid #000000; float: right;" /></div>
{/edsnewanimate}

Thanks for any help. I'm stuck!
Andrew

Dear Andrew,
Thanks for using the Animate It!

This issue you are facing is actually a bug of Chrome. You can check here:
stackoverflow.com/questions/16687023/bug...low-hidden-in-chrome

A simple fix here could be:

1. Login to you Backend and go to Settings > Animate It! > Custom CSS Box
2. Paste the Following CSS:


Please let me know if this works.

It wasn't working, but I've made other template changes (not sure what though) which must have changed something, and now its working but my pics aren't responsive. The pics without animation are responsive though. Will that work, or should I jgive up on that idea?
Andrew

Dear Andrew,

I checked shriek.biz/jandalbar.co.nz/index.php and the images seem responsive to me.
Could you please let me know what changes have you made?

Also, if you could share a screenshot of the issue, that would really be nice.
Regarding my previous solution (pasting CSS), I tested it using Inspect Element of Chrome, and that solved the issue on my end.

You are right. My pic are responsive, just that they are only shrinking down to the width of the screen. I'd probably want them to go to about 50% screen width. Don't know if that's possible.
I really don't know what I did to stop the whole page shrinking down to quarter size sorry. I've done so much mucking round and then I just noticed later it was working. Thanks for your help. Your extension is brilliant.
Andrew

Dear Andrew,

Thanks for the appreciation.

I believe you can use media queries to make the images adjust according to the screen size.
You can find more about it here: http://stackoverflow.com/questions/22873219/resizing-images-using-media-queries

Please let me know if there is anything else I can help you with.