phpBB • Free and Open Source Forum Software

skybound wrote:This is how we implemented responsive banners. Just placed this into the code section of the advert:

Code: Select all

<A href="http://www.xyz.com/"{COUNT_CLICK}>
<picture>
    <source media="(min-width: 1400px)" srcset="adimage/980Advert.png">
    <source media="(min-width: 800px)" srcset="adimage/728Advert.png">
    <source media="(min-width: 400px)" srcset="adimage/400Advert.png">
    <img src="adimage/728Advert.png" alt="IfItDoesntMatchAnyMedia">
</picture>

It does mean you need at least 3 versions of the banner artwork - but is an easy implementation.

<style=
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
<a href="https://ad-link-here.com"><img src="https://our-site.com/images/phpbb_ads/xxxxxxxxxxxx.jpg" width="100%"/></a>
</div>

<style=
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
<A href="https://ad-link-here.com"{COUNT_CLICK}>
<picture>
    <source media="(min-width: 1400px)" srcset="adimage/980Advert.png">
    <source media="(min-width: 800px)" srcset="adimage/728Advert.png">
    <source media="(min-width: 400px)" srcset="adimage/400Advert.png">
    <img src="adimage/728Advert.png" alt="IfItDoesntMatchAnyMedia">
</picture>

ManOnTime wrote:I combined some of the code in this thread for use on my site, but I am still having display issues.

How can we totally eliminate the grey space around the ad? Also, why doesn't it center in the box on mobile? (See screen shots.)

My site: https://www.manontime.com

Thank you.

margin: 0;
  padding: 0;
  border: none;
  display: block;

Center this ad automatically:
Set to yes to let this extension center your ad automatically. If this leads to undesired results, use CSS directly in the code to center your ad accordingly.

CGI1984 wrote:

skybound wrote:This is how we implemented responsive banners. Just placed this into the code section of the advert:

Code: Select all

<A href="http://www.xyz.com/"{COUNT_CLICK}>
<picture>
    <source media="(min-width: 1400px)" srcset="adimage/980Advert.png">
    <source media="(min-width: 800px)" srcset="adimage/728Advert.png">
    <source media="(min-width: 400px)" srcset="adimage/400Advert.png">
    <img src="adimage/728Advert.png" alt="IfItDoesntMatchAnyMedia">
</picture>

It does mean you need at least 3 versions of the banner artwork - but is an easy implementation.

Thank you for this.

So if I understand you correctly, I would need to create one ad banner each at 1400px, 800px, and 400px? - Yes, that would be very easy.

The code part has me a bit confused though.

At the moment we are using the following:

Code: Select all

<style=
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
<a href="https://ad-link-here.com"><img src="https://our-site.com/images/phpbb_ads/xxxxxxxxxxxx.jpg" width="100%"/></a>
</div>

So we would need to implement this code instead as follows?

Code: Select all

<style=
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
<A href="https://ad-link-here.com"{COUNT_CLICK}>
<picture>
    <source media="(min-width: 1400px)" srcset="adimage/980Advert.png">
    <source media="(min-width: 800px)" srcset="adimage/728Advert.png">
    <source media="(min-width: 400px)" srcset="adimage/400Advert.png">
    <img src="adimage/728Advert.png" alt="IfItDoesntMatchAnyMedia">
</picture>

And then we would need to upload the 3 ad banner files to https://our-site.com/images/phpbb_ads/ and title them 980Advert.png, 728Advert.png, and 400Advert.png?

Lastly, I am not sure what the advantage is of having the 3 different sized banner files because the width="100%" code we are using now automatically resizes the single 1400px file to fit any screen width resolution. Are there any other advantages to having the 3 different banner sizes?

The only problem we have right now is that on a mobile device the ads don't actually show 100% edge to edge on the mobile device screen when running our site using the mobile responsive version of the style we are using.

As it is now, the ads only fill up about 90% of the screen width. We tried playing around with different width percentages and the problem is the same. We can't seem to fix it with code.

If we could figure out how to get the ads on mobile devices to stretch edge to edge to 100% on the screen like the rest of the site does on a mobile device in our responsive style then we would be really happy with the way our ads are displaying now. Is there perhaps any way to get the ads to stretch to 100% of the screen on a mobile device instead of only around 90%?

Many thanks again.

.phpbb-ads-center img {
width: 100%;
max-width: 728px;
height: auto;
max-height: 90px;
}

CGI1984 wrote:UPDATE:I think I got it. I added the following to the end of the banner URL and this fixed it: alt="Image" width="100%"/>.