XF 1.2 responsive iframe

[ChrisW]

I have a the following code in my ad_header template that displays a 468 x 60 banner advert to the right of my logo

<xen:hook name="ad_header" />
<div style="float:right; margin:5px; padding-right:100pt;">
<iframe src="http://www.satellites.co.uk/ads.htm" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="60px" width="468px"></iframe>
</div>

This is causing the responsive display to scroll, how can I prevent this banner from showing on devices with small screens ?

Chris.

 

[Jeremy]

<xen:if is="@enableResponsive">
@media (max-width:430px) {
  iframe[name='myiFrame'] {
    display: none;  
  }
}
</xen:if>

You may want to look at the TOS for your ad provider to make sure this doesn't violate it.

 

[ChrisW]

<xen:if is="@enableResponsive">
@media (max-width:430px) {
  iframe[name='myiFrame'] {
    display: none; 
  }
}
</xen:if>

You may want to look at the TOS for your ad provider to make sure this doesn't violate it.

Thanks, They are are our own in house ads so no problems, does the above code go in extra.css ?

 

[Jeremy]

Yes, and you may need to tweak the 430px to fit your needs. The above code will only be used on a screen who's width is smaller than that number.

 

[Paul B]

Someone else had a responsive iframe issue recently.

This may also be of use: http://xenforo.com/community/threads/set-iframe-width-using-responsive-presets.56201/#post-599516

 

[ChrisW]

Works great thanks.