XF 1.4 ad_header Styling Issues in Responsive Mode

[Neutral Singh]

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.

Any suggestion?

Thank you so much!

<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>

 

[Jake Bunce]

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.

 

[Neutral Singh]

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

 

[Russ]

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

@media (max-width:@maxResponsiveMediumWidth)
{
.Responsive #headerMover #headerProxy { height: 359px; }
}

Ads disabled on the page it shows fine(without the query)

 

[Neutral Singh]

Thanks but where do i put this code!

 

[Russ]

Extra.css

 

[Neutral Singh]

@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

 

[Neutral Singh]

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

<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>