Wondering how to create a responsive ad zones? By default, Broadstreet fixes the ad sizes so that they appear in their natural size. You can change this behavior by modifying the Zone Code.

Code needed to create responsive ad zones

Your default zone code will look like this:

<script type=”text/javascript”>broadstreet.zone(12345);</script)

To make the zone code responsive, it should look like this:

<script type=”text/javascript”>broadstreet.zone(12345, {responsive: true});</script)

This will make the ads fit the screen on different devices.

Note: It’s possible, although very unlikely, that your website theme may override the Broadstreet settings that make the ad responsive. If the above does not work for you, you can try adding some CSS to the site, where .ad-container is the class of an element (preferably a div or li) that contains the ad zone code.

.ad-container span { display: inline-block; width: 100%; height: auto;}

.ad-container a { display: inline-block; width: 100% !important; height: auto !important;}

.ad-container img {with: 100%; height: auto !important;}

That should force your ads to scale to the container width, responsively.

Broadstreet Ads