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

XF 1.4 ad_header Styling Issues in Responsive Mode

Discussion in 'Styling and Customization Questions' started by Neutral Singh, Jan 24, 2015.

  1. Neutral Singh

    Neutral Singh Well-Known Member

    Hi @Jake Bunce

    Facing an annoying little issue...

    http://www.sikhphilosophy.net/xf/

    When i add the following html in ad_header template, these two white arrows from the breadcrumb show up awkwardly only in responsive mode... in desktop view all looks fine... i remove the html and these do not show-up. i can see these arrows in my mobile device as well... no idea how to get rid of this thingy. o_O

    Any suggestion?

    Thank you so much!

    Code:
    <xen:hook name="ad_header" />
        <div style="float: right;">
        <br>
        <a target="_blank" href="http://khalsaaid.org/"><img width="190" height="61" src="/images/adverts/khalsa-aid.jpg"></a>
        &nbsp;&nbsp;
        <a target="_blank" href="http://www.gursoch.com/ "><img width="190" height="61" src="/images/adverts/gursoch.gif"></a>
        </div>

    Screen Shot 2015-01-24 at 12.05.50 AM.png Screen Shot 2015-01-24 at 12.06.21 AM.png
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That is very likely related to your header height:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo

    The header height is usually fixed and expected to stay the same.

    In your case the fix is probably to increase your header height to accommodate those images (at least 61px, maybe more). Just keep increasing the height until the problem goes away.
     
  3. Neutral Singh

    Neutral Singh Well-Known Member

    @Jake Bunce
    Even making width 525px does not make it go...


    2015-01-24_13-53-55.jpg
     
  4. Russ

    Russ Well-Known Member

    You need to add a media query to offset for the ad banner:

    Code:
    @media (max-width:@maxResponsiveMediumWidth)
    {
    .Responsive #headerMover #headerProxy { height: 359px; }
    }
    
    Ads disabled on the page it shows fine(without the query)
     
    Neutral Singh likes this.
  5. Neutral Singh

    Neutral Singh Well-Known Member

    Thanks but where do i put this code! :unsure:
     
  6. Russ

    Russ Well-Known Member

    Extra.css
     
    Neutral Singh likes this.
  7. Neutral Singh

    Neutral Singh Well-Known Member

    @Jake Bunce @Russ

    Sorry for being PIA but this did not do anything! I am a complete novice at this... After adding the code in extra.css what else am i supposed to do, is there anyway to hide these banner after a certain browser length, thanks
     
    Last edited: Jan 24, 2015
  8. Neutral Singh

    Neutral Singh Well-Known Member

    Woohoo! Finally, the following code seems to working fine for me... (y)

    Code:
    <xen:hook name="ad_header" />
       <table class="hiddenResponsiveWide hiddenResponsiveMedium hiddenResponsiveNarrow" align="left" valign="bottom" nowrap="nowrap" style="max-width:375px; float: right;">
       <tr>
       <td nowrap>
       <div><br>
       <span><a target="_blank" href="http://www.org/"><img style='max-width:185px;' height="61" src="/images/adverts/"></a></span>
       &nbsp;
       <span><a target="_blank" href="http://www.com/ "><img style='max-width:185px;' height="61" src="/images/adverts/></a></span>
       </div>
       </td>
       <tr>
       </table>
    
     

Share This Page