XF 2.0 hiddenResponsiveNarrow/Medium/Wide/Full - XF2 Alternatives?

[Marcel]

On 1.5, displaying banner ads in the header (top right), I would run two ad units.
One fullsize 468x60 with the CSS classes hiddenResponsiveNarrow hiddenResponsiveMedium hiddenResponsiveWide
One 300x50 with the CSS class hiddenResponsiveFull

This would allow the browser to seamlessly show either correctly.

What would be the best way to achieve this in XF2?
Ideally i'd like it applicable to either two different banner images (of the above sizes), or two different code units.

Thanks

 

[upnet]

If I understand you correctly you used a similar code to this below to show ads based on user being responsive or not. This code worked in ad_templates. Now these div tags have changed for XF 2+. You are wondering what the equivalent is. I am wondering too!

<div class="hiddenResponsiveNarrow">
    Non responsive ad image shows (desktop)
</div>

<div class="visibleResponsiveNarrow">
    Responsive ad image shows mobile()
</div>

 

[Mike]

There are a number of classes that do this, depending on what you want. From my examples below, pick one of the values in a set of {...}:

For hiding: u-hide{Narrow, Medium, Wide} (so for example, u-hideMedium) - this will hide at the specified width and below.

For showing: u-show{Narrow, Medium, Wide}{Inline, Block} (so for example u-showWideBlock) - this will show at the specified width and below, using the display type requested (inline or block). Block is probably going to be more common.

 

[Marcel]

Thank you both! That should work a treat