XF 2.1 Advertising Banner: How to use a smaller version for mobile?

[rockymountainmotos]

I'm displaying an advertising banner on my forum. I used the Setup > Advertising function and added img code to display the banner in the Container Breadcrumb: Above position.

On mobile, the banner is very small and hard to read.

Is there a way to display an alternate advertising banner for the mobile version?

TIA!!!

 

[Ozzy47]

Perhaps this will help,

Unmaintained - Responsive AdSense

One of the biggest concerns with 1.2 has been how to activate the responsive design while still using AdSense. Obviously as the various page widths are now totally dynamic, simply adding a Google ad slot in the normal manner won't work. Once the...

xenforo.com

 

[rockymountainmotos]

Perhaps this will help,

Unmaintained - Responsive AdSense

One of the biggest concerns with 1.2 has been how to activate the responsive design while still using AdSense. Obviously as the various page widths are now totally dynamic, simply adding a Google ad slot in the normal manner won't work. Once the...

xenforo.com

Thanks! I see some tasty stuff in there, but alas, I am not a programmer, so most of it is over my head. I'm using simple HTML code to display an image.

 

[Mr Lucky]

Try this, it is off the top of my head so no guarantees but something like this will work. adjust screen size px to what you want

In your ad code html

<img class="large" src="path_to_large_banner" />
<img class="small" src="path_to_small_banner" />

In your style template extra.less

@media only screen and (max-width: 720px)
{img.large
{display:none}
}

@media only screen and (min-width: 721px)
{img.small
{display:none}
}

 

[rockymountainmotos]

Try this, it is off the top of my head so no guarantees but something like this will work. adjust screen size px to what you want

In your ad code html

<img class="large" src="path_to_large_banner" />
<img class="small" src="path_to_small_banner" />

In your style template extra.less

@media only screen and (max-width: 720px)
{img.large
{display:none}
}

@media only screen and (min-width: 721px)
{img.small
{display:none}
}

That totally worked! Thanks!

 

[Mr Lucky]

That totally worked! Thanks!

You're welcome. And presumably you can see why it worked so can adapt to various different screens.

I have to admit there may well be a more elegant solution.