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

XF 1.5 add_header_after needs to be hidden on mobile

#1
I needed to add the rest of our page header on the forum and have done so by using add_header_after. It worked and looks great. However, I noticed on mobile it looks really bad as it is cut about in 1/3.

How can I use Xen:if to hide the add_header_after completely on mobile?
 
#3
Thanks Brogan.

So can I do something like this, with the .css inside the add_header_after template? Or does the css need to go somewhere else?

Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
        .addheaderkd {
        float: right; padding-top:0px; clear: right;
        }
    }

    @media (max-width:@maxResponsiveMediumWidth) {
        .addheaderkd {
        display:none
        }
    }

    @media (max-width:@maxResponsiveNarrowWidth) {
        .addheaderkd {
        display:none
        }
    }
</xen:if>

<div style="float: right; padding-top:10px; height: 26px; width: 2px;"></div>
<div id="addheaderkd"><img src="/header_graphic.png">
</div>
 

Brogan

XenForo moderator
Staff member
#4
You would typically add that to the EXTRA.css template.

Your ad template should just contain the code for displaying the ads/banners.