XF 1.4 ad_header positioning help please.

[Stemmy]

Im sorry if this has been asked a milliuon times before but I need help and have looked first.

I want to place an ad block top right next to my logo. I want it to float right etc.

My forum is here - www.photography-forum.org

as you will see I have edited the ad_header template with -

<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
<img style="vertical-align: middle" src="https://www.photography-forum.org/img/sponsors/mpbsmall2.gif" />
</div>

And all looks well on the desktop version.

My problem is it all breaks out on the mobile version - the add goes above the logo and then graphics are in the wrong place etc.

Any help would be greatly appreciated.

thanks in advance

Martin

 

[Paul B]

I would suggest replacing the inline styling with a class and then using media queries to adjust the CSS based on the browser width.

https://xenforo.com/community/resources/responsive-design.2193/

 

[Stemmy]

I am happy for it not to show on the mobile versions of the forum ?

How would I do that ?

 

[Paul B]

Use display:none in the media query or one of the predefined classes, as explained in the guide.

 

[Stemmy]

Im sorry for sounding thick but I am very new to this. I have found the CSS section for each responsive size.

What code do I need for that section to stop the advert from showing ?

Probably stupidly I added display:none as you said and the whole forum didnt show