0
I am trying to include a responsive banner on my site (wp 4.9.6), following a guide I found on the internet (I am amateur).
Banner loads normally on desktop and responsiveness works on some Android devices. It doesn’t work on tablets and IOS.
I’m using the style:
<style>
.banner-iframe
{position: relative;padding-bottom: 56.25%;padding-top:30px;height:0;overflow:hidden;}
.banner-iframe iframe
{position:absolute;top:0;left:0;width:100%;height: 100%;}
</style>
With these iframe parameters
<div class="banner-iframe">
<iframe src="banner.html"
style="border:0px #000000 none;"
name="meuBanner"
scrolling="no"
marginheight="0px"
marginwidth="0px"
width="728px"
height="90px"
frameborder="0">
</iframe>
</div>
Your iframe is like a fixed width of width="728px", try putting 100% to see if it solves
– hugocsl
Didn’t solve. The banner has its own css: <meta name="ad.size" content="width=728,height=90"> var bannerJson = (...) "width":728,"height":90,"loop" This may be the problem?
– ggmagal
Attributes may not have
px, only the numerical value.– Sam
@dvd fixed, thanks. But nothing has changed
– ggmagal
was just a hint. The problem may be right on fixed width. Does the iframe page have its own CSS? It’s from another domain?
– Sam
has its own CSS. I suspect that’s the problem. It’s in my domain.
– ggmagal
Exactly. Put in the banner image
width: 100%; max-width: 728px;and in the iframe the same thing that should work.– Sam