Responsive Ads in Directory Theme

I wanted to contribute a tip since this info doesn’t seem to be on these pages.

By default, even though the themes are responsive, if you wish to use the theme’s built-in advertising features to place banners on your site, these banners, even if you gut out all image size code, are not.

Fortunately, the fix is very simple. All you have to do is go to your theme’s template CSS file and add some code.

For me it was DT/templates/template_directory_theme/style.css

Open that file – of course makign a backup of it first – and add the following at the bottom:

/*** Responsive Ads ***/

img.Image { max-width: 100%;}
div#AdHeader {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 468px; }
div#AdFooter {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 650px; }
div#AdWrapper {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1000px; }
div#AdColTop {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 650px; }
div#AdColBottom {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 650px; }

Now for your ads, whatever banners you ad in your Advertising Settings, just place them in a div with the appropriate ID (such as <div id=”AdColTop” . . . blah blah blah>Your ad code here</div>

That’s it. Very simple and takes less than a minute to implement.

I hope this helps others who may be wanting to use ads but also want the ads to be responsive on mobile devices.