Make your 728×90 ad responsive on mobile devices.

In the modern web, visitors view website through many different types of devices: desktops, laptops, netbooks, TVs, tablets, smartphones, etc. So, there are many different screen dimensions and resolutions to consider and your ads should display perfectly on all devices and screen. Here we are presenting one simple CSS solution that can help you to make 728×90 ad responsive to fit on mobile screens. RITS ADs supports four major formats, such as 728×90, 160×600, 300×250, 300×600, 320×50 where only 728×90 from these sizes won’t fit on mobile devices. So, here is the solution:

 

1. Add in head of your HTML page the following CSS style (in between <head> and </head>).

 

<style>

@media all and (min-device-width: 700px) and (max-device-width: 728px) {#leaderboard-ritsads {transform: scale(0.9);}} @media all and (min-device-width: 671px) and (max-device-width: 699px) {#leaderboard-ritsads {transform: scale(0.9);transform-origin: 0 0;}} @media all and (min-device-width: 651px) and (max-device-width: 670px) {#leaderboard-ritsads {transform: scale(0.88);transform-origin: 0 0;}} @media all and (min-device-width: 631px) and (max-device-width: 650px) {#leaderboard-ritsads {transform: scale(0.85);transform-origin: 0 0;}} @media all and (min-device-width: 601px) and (max-device-width: 630px) {#leaderboard-ritsads {transform: scale(0.8);transform-origin: 0 0;}} @media all and (min-device-width: 601px) and (max-device-width: 630px) {#leaderboard-ritsads {transform: scale(0.8);transform-origin: 0 0;}} @media all and (min-device-width: 560px) and (max-device-width: 600px) {#leaderboard-ritsads {transform: scale(0.75);transform-origin: 0 0;}} @media all and (min-device-width: 520px) and (max-device-width: 559px) {#leaderboard-ritsads {transform: scale(0.7);transform-origin: 0 0;}} @media all and (min-device-width: 491px) and (max-device-width: 519px) {#leaderboard-ritsads {transform: scale(0.65);transform-origin: 0 0;}} @media all and (min-device-width: 451px) and (max-device-width: 490px) {#leaderboard-ritsads {transform: scale(0.6);transform-origin: 0 0;}} @media all and (min-device-width: 401px) and (max-device-width: 450px) {#leaderboard-ritsads {transform: scale(0.55);transform-origin: 0 0;}} @media all and (min-device-width: 371px) and (max-device-width: 400px) {#leaderboard-ritsads {transform: scale(0.5);transform-origin: 0 0;}} @media all and (min-device-width: 341px) and (max-device-width: 370px) {#leaderboard-ritsads {transform: scale(0.46);transform-origin: 0 0;}} @media all and (min-device-width: 301px) and (max-device-width: 340px) {#leaderboard-ritsads {transform: scale(0.42);transform-origin: 0 0;}} @media all and (max-device-width: 300px) {#leaderboard-ritsads {transform: scale(0.4);transform-origin: 0 0;}}

</style>

 

2. Wrap ad tag code on the page in DIV with id=”leaderboard-ritsads to call CSS from head.

 

Example:

 

 <div id=”leaderboard-ritsads”>    

<div id=”99999999_AD1″ style=”width:728px;height:90px;margin:0;padding:0″></div>

        <script type=”text/javascript”>

          var OX_ads = OX_ads || []

          OX_ads.push({

             slot_id: “99999999_AD1“,

             auid: “99999999

          });

        </script>

        <script type=”text/javascript” src=”http://admin.ritsads.com/w/1.0/jstag”></script>

 </div>

Leave a Reply