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

XF 1.4 Banner for a responsive design.

Discussion in 'Styling and Customization Questions' started by Arnuxx, Sep 20, 2014.

  1. Arnuxx

    Arnuxx Member

    Hi all,
    I have placed .gif banner on my forum,but when browser size reduces,add would go to side .
    I would like to ask anyone,could anybody please explain,what code modification I need to have,to show different size .gif or .jpeg banners when browser size reduces.
    I was reading one of the threads for a google adsense,but very difficult to understand.
    I would really appreciate if anyone could make as simple as possible tutorial for this question,as I also think,that would help a lot of members also.
    P.S don't want to install any add ons.
    Thanks very much in advance.
     
  2. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    Can you post the HTML code for the banner you used?
     
  3. Arnuxx

    Arnuxx Member

    <xen:hook name="ad_above_top_breadcrumb" />
    <div style="display: block; margin: 0 auto; text-align: center;">
    <a href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" /></a>
    </div>
     
  4. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    okay... change it to:
    HTML:
    <xen:hook name="ad_above_top_breadcrumb" />
    <div style="display: block; margin: 0 auto; text-align: center;">
    <a href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" style="max-width: 95%" /></a>
    </div>
    
     
  5. Arnuxx

    Arnuxx Member

    no,didn't work.
    But this is really not give me an answer.
    I was asking "show different size .gif or .jpeg banners when browser size reduces."
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    This resource explains how to do that: https://xenforo.com/community/resources/responsive-design.2193/

    Presumably you mean this guide? https://xenforo.com/community/resources/responsive-adsense.2084/
    It can't really be explained any simpler than that.
     
  7. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    ah... missed one this:
    HTML:
    <xen:hook name="ad_above_top_breadcrumb" />
    <div style="display: block; margin: 0 auto; text-align: center;">
    <a style="display: block;" href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" style="max-width: 95%; display: block;" /></a>
    </div>
    
    It would be a bit pain to set different banners for different screen sizes with only HTML...

    EDIT: ninja'd :D
     
  8. Arnuxx

    Arnuxx Member

    yes,that works:)
    is t possible to have banner aligned to center on when browser on full width ?
     
  9. Mr. Goodie2Shoes

    Mr. Goodie2Shoes Well-Known Member

    This:
    HTML:
    <xen:hook name="ad_above_top_breadcrumb" />
    <div style="display: block; margin: 0 auto;">
    <a style="display: block; text-align: center;" href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" style="max-width: 95%; display:inline-block ;" /></a>
    </div>
    
     
    Arnuxx likes this.
  10. Arnuxx

    Arnuxx Member

    Thanks so much:)
     

Share This Page