Advertisement Management

Responsive Banners - Advertisement Management

Responsive Banners

by CGI1984 » Mon May 11, 2020 10:06 am

We created an ad banner that is 1150 x 70 pixels and we are using it with a responsive style. This banner fits perfectly on desktop computers, but it doesn't resize down when someone visits our site on a mobile device and then gets served the responsive version of the style.

Is there any way to force the banner to resize to fit the screen of mobile devices like the style does or can we add some code to the extension to disable the ads on mobile devices completely? Many thanks.
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by CGI1984 » Mon May 11, 2020 12:00 pm

Would it be possible to insert something like the following code into ads\styles\all\template\phpbb_ads_default.html to prevent the ads from showing up on mobile devices for now?

Code: Select all

<style>
	@media only screen and (max-width: 800px) {
			display: none!important;
		}
	}
</style>
I hate to kill ads on mobile devices since probably 75% of people are on mobile devices, but I don't know how else to make the banners automatically resize to meet a smaller display area of the style on mobile devices.

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%"/>.

The only problem still is there are margins below the banner which are very big. They are bad on desktop computers, but even much worse on a mobile device when the banner gets scaled down. Here is a screenshot from a desktop browser. The margin under the ad banner is so big that is pushing the navigation below out of alignment. See screen shot below from a desktop browser showing the gap between the ad and the navigation elements below it and how the last one drops down a line because of this.
Gap.jpg
Is there any code I can add to the ad banner URL to remove this big gap?
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 8:49 am

I have now tried various different configurations using the following code added to my advertising code links to try and get rid of the big gaps appearing below my ad banners on the site. I guess there is no way to remove the gaps with code?

width="100%" display="block" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse"

I am also wondering if I can possibly add some code edits to the phpbb\ads\styles\all\theme\phpbbads.css file to remove the gaps below the banners?
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by DavidIQ » Fri May 15, 2020 10:20 pm

Unless you're using tables, which you shouldn't, adding any of those properties to whatever element you're trying to adjust is not going to do anything. You need to use the style tag like you posted before, but put it in the ad definition itself instead of editing the extension (you shouldn't need to modify the extension for anything), create a CSS class, assign the needed properties, and then assign that class to the container for your ad.
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 18490
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 10:35 pm

Thanks. I’m not really good with CSS, but I could probably fumble my way through to creating some sort of style class with no margins, no borders, no padding, etc. The only thing I will probably have problems with will be assigning it to the container for the ad’s URL. If you could perhaps please show me a sample of how all the code might look together as one then I think I probably could work it out from there. Thank you.
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by DavidIQ » Fri May 15, 2020 10:40 pm

What you enter for your ad code would end up looking something like:

Code: Select all

<style>
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
   your ad code goes here
</div>
Here's a good reference to get you through the finer details of CSS: https://www.w3schools.com/css/default.asp
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 18490
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 10:52 pm

Perfect. Thank you. Great starting point on both. I’ll try and get it working and let you know how it turns out.
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 11:04 pm

Just quick question please on how I would put my add code in. Would it go like this or something different?

Code: Select all

<style>
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
<a href="https://linkedsite.com"><img src="https://mysite.com/images/phpbb_ads/3708236asdas317edd9c23r2r024eddfe0.jpg" width="100%"/>
</div>
I have tried that actually and it didn't seem to load unfortunately.

I just tried this as well. Didn't load either:

Code: Select all

<style>
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
  width: 100%;
}
</style>
<div class="my_ad_banner">
<a href="https://linkedsite.com"><img src="https://mysite.com/images/phpbb_ads/3708236asdas317edd9c23r2r024eddfe0.jpg"/>
</div>
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by DavidIQ » Fri May 15, 2020 11:08 pm

You're missing a closing </a>
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 18490
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 11:21 pm

Thanks. Now I have as follows, but still not loading for some reason:

Code: Select all

<style>
.my_ad_banner {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
</style>
<div class="my_ad_banner">
<a href="https://linkedsite.com"><img src="https://mysite.com/images/phpbb_ads/3708236asdas317edd9c23r2r024eddfe0.jpg" width="100%"/></a>
</div>
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 11:24 pm

It works as a preview though and above the banner preview it shows this for some reason: .my_ad_banner { margin: 0; padding: 0; border: none; display: block; }
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by DavidIQ » Fri May 15, 2020 11:30 pm

I just copied exactly what you have, added to a fake ad, clicked preview, and it loaded exactly as it should.
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 18490
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 11:34 pm

Thanks. I just tested it on another banner and it worked too. Not sure why the first banner didn't load. But are you getting this code .my_ad_banner {margin: 0; padding: 0; border: none; display: block;} loading above the banner? I am for some reason.

UPDATE:
The first banner I tested it on didn't show because of a start date issue. So all banners are working now and all gaps are gone like I wanted them. The only problem is that code that appears above the banners that I mentioned. Not sure why I am getting that. Thanks again for all your help. Much appreciated.
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by CGI1984 » Fri May 15, 2020 11:58 pm

This is showing on the site right above the banner. Now sure how to hide it.
Code.jpg
Code.jpg (11.32 KiB) Viewed 485 times
User avatar
CGI1984
Registered User
Posts: 203
Joined: Thu Feb 20, 2020 8:27 am

Re: Responsive Banners

by DavidIQ » Sat May 16, 2020 12:12 am

That kind of looks like you have that as text for some ad somewhere instead of inside of a style tag. Link?
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 18490
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón