Nifty Banner Exchange Trick Make Any Banner Exchange Ad Mobile Responsive

Read Time:2 Minute, 32 Second

In today’s post I’m going to show you how I make any non responsive banner exchange ad (such as the kind sharemyads.com offers) into a responsive one. This is so people on mobile don’t see a large 728 or 468 banner hanging off the page they instead see a 300 x 250 banner, while on the reverse desktop users see the 728 x 90 or 468 x 60 banner.

Here’s The CSS For Your Website

Copy this CSS and paste it to your style.css file or within the style tags normally found within the header tags of your website.

#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}

Here’s the HTML Code For Your Website

Replace the banner codes with other exchanges if you like or signup for sharemyads.com and add your ref links lol.

<div id="content-mobile">
<div align="center">
<!-- Begin SMA Code -->
<div class="sMa4"></div>
<script async="async" src="//sharemyads.com/view/300/?uid=1"></script>
<noscript><a href='http://sharemyads.com/index.php?ref=1' target='_blank'><img src="http://sharemyads.com/img/banners/banner.png" alt="SMA Banner Exchange" style="float:left; padding:10px;" /> </a></noscript>
<!-- End SMA Code -->
</div>
</div>
<div id="content-desktop">
          <div align="center">
        <!-- Begin SMA Code -->
<div class="sMa3"></div>
<script async="async" src="//sharemyads.com/view/728/?uid=1"></script>
<noscript><a href='http://sharemyads.com/index.php?ref=1' target='_blank'><img src="http://sharemyads.com/img/banners/banner.png" alt="SMA Banner Exchange" style="float:left; padding:10px;" /> </a></noscript>
<!-- End SMA Code -->
</div>

</div>

now, basically this works using @media screen and (max-width: XX px) Option Within CSS. When the screen is 768px or more the larger banners show, when the screen is minimized smaller than this than the CSS switches the banner to the smaller one. We can change this size to anything we like but in our case I believe it’s set perfect.

You can see this in action on most of my traffic exchanges – IE, Funneled Affiliate Traffic Exchange

Conclusion

This trick is stupid simple and will allow you to earn more credits while not making your site look dodgy 🙂 I’ve been using this method to preform this task for about 2 years with no issues, on a number of sites.

Being that mobile users are so prevalent in todays world, it makes sense to optimize your banner exchange ads to fit these users. It’s a very simple tweak to your website to garner much better results from your traffic efforts, all while making your website look more professional.

Leave a Reply

how to use manual traffic exchanges Previous post How To Use A Manual Traffic Exchange For Maximum Effect!
Next post Banner Ad Rotators JavaScript & PHP Codes For Your Website!