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

XF 1.2 How to make a banner responsive

Discussion in 'Styling and Customization Questions' started by Mr Lucky, Nov 14, 2013.

  1. Mr Lucky

    Mr Lucky Well-Known Member

    If I have a banner e.g. above content, is there a way to make it responsive?

    Thanks
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    It depends on how you created the banner. @Brogan's responsive design resource explains a lot of how to go about responsive design.
     
  3. Mr Lucky

    Mr Lucky Well-Known Member

    The banner is either an image (.jpg) with a link or adsense. Where do I find that responsive design resource please?
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

  5. Mr Lucky

    Mr Lucky Well-Known Member

    Thanks, I follow the adsense instructions, but the second link doesn't seem to address how to make a banner image responsive, all I can find is:

    In my ad above content template I have this :
    HTML:
    <xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>
    
    <xen:set var="$banners.1"><a href="http://domain.com/"><img src="image1.png" alt ="" /></a></xen:set>
    <xen:set var="$banners.2"><a href="http://domain.com/"><img src="image1.png" alt ="" /></a></xen:set>
    
    {xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}
    So no size is set for the images, yet they do not resize responsively.
     
  6. Mr Lucky

    Mr Lucky Well-Known Member

  7. Mr Lucky

    Mr Lucky Well-Known Member

    It's OK, I just needed to learn a bit more about responsiveness:

    Code:
      .bannerad {
        max-width: 100%;
        height: auto; 
      }
     

Share This Page