XF 1.5 add_header_after needs to be hidden on mobile

[indepth]

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?

 

[Paul B]

You use a media query to target and hide specific elements.

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

 

[indepth]

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?

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

 

[Paul B]

You would typically add that to the EXTRA.css template.

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