MOBILE: DIV Breaking Bounds
 

We utilize Slideshow Pro for our galleries and slideshows on our website. It's Flash based, but the neat thing about it is that it's able to show a non-Flash version called a "mobile poster" which links to a swipeable gallery for iOS and Android devices.

The bad thing is that when our responsive site scales down for one of these mobile devices and the mobile poster replacement takes over, it's breaking the bounds of our #Content DIV.

I've found that the DIV for the mobile poster is #album-5, but all efforts to make length & width 100% instead of the set number displayed has failed.

You can easily replicate the problem by making the user agent for your browser iOS, and then shrinking the webpage until you see the error.

WEBPAGE

Is there any more information that I should be adding to this...or is it just as tricky as I'm thinking it is?

Ok so I ended up being able to make it work by using max-width and max-height...however the photo inside of the mobile poster is distorted and squashed. Any help to alleviate this would be great.

I've finally figured out that the javascript is injecting the CSS values after everything else. I have no idea how to counter this lol.

There is a forum here for mobile devices that might have better responses.

Thank you. Did not know.