Automatic sizing

User 148735 Photo


Registered User
97 posts

I have a banner that is encodes in a <script> . The banner does not resize for ipad or iPhone and it too big for these devices. Can anyone tell me how to get this to resize -- what CSS code, etc.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Not sure what you mean by 'encodes in a script'. But normally you create a container with a max-width set to your banner size, then you put the banner in it and give it a width of 100%.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Sounds like your trying to apply some css on a JQuery load event. If you could share a link so we can see the problem that would help us help you.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 148735 Photo


Registered User
97 posts

<script type="text/javascript" src="http://shephillsclermont.org/banner new site/bzLoader.js"></script><noscript><p style="background-color:#ffffff;color:#000000;padding:1em;">Your browser doesn't support JavaScript or you have disabled JavaScript.</p></noscript><div id="SWBZ82EEEEBFE0664CF99146"></div><div id="LKBZ82EEEEBFE0664CF99146"></div>

Above is the code. It refers to a program called Bannerzest which is a banner maker. I've used it for a long time and it worked fine. Just in this responsive code is it not working on ipad and iPhone. BTW the code is generated in flash and HTML5 and uses whatever it needs to work. The HTML5 code is showing up on the Ipad.

The website is not up yet, but try shephillsclermont.org/test/index.html That will show you the banner. If you can pull it up on an iPhone you will see the problem.

The banner works fine in browsers, but is way to large, particularly on iPhone.
On current website it works fine. Something in the responsive layout code must be affecting this.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

The problem is that your banner has a fixed width of 800.
<object width="800" height="225" type="application/x-shockwave-flash" data="http://shephillsclermont.org/banner%20new%20site/bzAnimation.swf" id="SWBZ82EEEEBFE0664CF99146" style="visibility: visible;"><param name="wmode" value="transparent"><param name="allowscriptaccess" value="always"><param name="flashvars" value="xmlPath=http://shephillsclermont.org/banner%20new%20site/bz.xml&amp;imgPath=http://shephillsclermont.org/banner%20new%20site/img&amp;soundPath=false&amp;themeMode=2"></object>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 148735 Photo


Registered User
97 posts

Would the answer be to generate another banner with smaller width and then use some responsive code to recognize the iPhone?

If so, what code do I need to use. It seems responsive layout maker does not support this function, and I have to hand code it?)

(BTW, I'm not an expert at this, so bear with my ignorance. )
User 271657 Photo


Ambassador
3,816 posts

The answer would be to use a non-Flash, responsive slideshow :D
There are hundreds of them available... WOW Slider seems to be popular around here.
http://wowslider.com/wordpress-gallery- … -demo.html

A few others:
http://responsiveslides.com/
http://flexslider.woothemes.com/index.html
http://unslider.com/

These are all JS/Jquery – no Flash, so they'll show up on any device. Also, you only need to make one banner/slider and it will re-size itself to fit the screen. ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 148735 Photo


Registered User
97 posts

Thanks. I tried WOW slider per your recommendation and it works well.
User 271657 Photo


Ambassador
3,816 posts

Glad to hear you got it worked out :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.