XF 2.2 Use different advertising tags based on desktop/mobile?

[Thunderfall]

is there a way to use different advertising tags based on user screen size?

if user is on desktop, I want to use desktop tag 728x90 ads..
if user is on mobile, I want to use mobile ad tags which has max width 300.

 

[Paul B]

If you are using AdSense: https://support.google.com/adsense/answer/9183362?hl=en

 

[AndyB]

You might like this add-on:

https://xenforo.com/community/resources/ad-manager.7463/

 

[Mr Lucky]

I just use this:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"
     data-ad-format="horizontal"
     data-full-width-responsive="true"></ins>

 

[Thunderfall]

Hi,

I don't use AdSense so need another solution.

I want to use custom CSS to hide/show the ads for desktop/mobile.
Anyone know where I could add the custom CSS?

Example:

/* Hide both ads by default */
.ad-desktop, .ad-mobile {
display: none;
}

/* Display the desktop ad for larger screens */
@media screen and (min-width: 768px) {
.ad-desktop {
display: block;
}
}

/* Display the mobile ad for smaller screens */
@media screen and (max-width: 767px) {
.ad-mobile {
display: block;
}
}

And the HTML:

<!-- Desktop Ad -->
<div class="ad-desktop">
<!-- Your desktop ad code here -->
</div>

<!-- Mobile Ad -->
<div class="ad-mobile">
<!-- Your mobile ad code here -->
</div>

 

[Thunderfall]

Never mind, I figured out. Looks like need to add custom CSS to extra.less template.

 

[Thunderfall]

This method above using CSS is working pretty well by the way.

 

[Paul B]

That's exactly what media queries are for.