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.
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.
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
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.