1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 responsive iframe

Discussion in 'Styling and Customization Questions' started by ChrisW, Aug 4, 2013.

  1. ChrisW

    ChrisW Member

    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

    Code:
    <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.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Code:
    <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.
     
  3. ChrisW

    ChrisW Member

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

    Jeremy XenForo Moderator Staff Member

    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.
     
    ChrisW likes this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    ChrisW likes this.
  6. ChrisW

    ChrisW Member

    Works great thanks. :)
     

Share This Page