Responsive Ads:

Create responsive ads is essential for user experience and performance factors. However it can also cause viewability issues if not been implemented correctly.

1. To hide the mobile ads on desktop

Publisher is responsible to hide the div wrapper by css and only initiate ad calls on mobile devices. 

Step One, hide div wrapper that is containing the ad using CSS

<style>

  @media only screen and (min-width: 1025px) {

    .Your_Mobile_Ad_Div_Class {

      display:none;

       }

  }

</style>

Step Two, only make request calls on mobile devices

In addition of creating responsive css for the wrapper, wrap around your ad call script inside the following javascript code:

  if (screen && screen.width < 1025) {

         // … your ad code here

   }

Here is a complete example: 

<style>

  @media only screen and (min-width: 1025px) {

    .Your_Mobile_Ad {

      display:none;

       }

  }

</style>

<div class="Your_Mobile_Ad">

    <div style="width:300px;height:600px;margin:0;padding:0">

        <div id="YOURADUID_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%">

        </div>        

        <script type="text/javascript">

        if (screen && screen.width < 1025) {

         var script = document.createElement('script');

         script.src='//served-by.pixfuture.com/www/delivery/headerbid.js'

         script.setAttribute("slotId","YOURADUID_ADSLOT1");

         script.setAttribute("refreshInterval",30);

         script.setAttribute("refreshTime",5);

         document.getElementById("YOURADUID_ADSLOT1").appendChild(script);

        }

        </script> 

     </div>

</div>

2. To hide the desktop ads on mobile

repeat the steps above but change the conditions to the following:

For CSS: 

<style>

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

    .Your_Desktop_Ad {

      display:none;

       }

  }

</style>

For JavaScript: 

<script type="text/javascript">  

if (screen && screen.width > 1024) {

         // … your ad code here

   }

</script>

Complete code example:  

<style>

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

    .Your_Desktop_Ad {

      display:none;

       }

  }

</style>

<div class="Your_Desktop_Ad">

    <div style="width:728px;height:90px;margin:0;padding:0">

        <div id="YOURADUID_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%">

        </div>        

        <script type="text/javascript">

        if (screen && screen.width > 1024) {

         var script = document.createElement('script');

         script.src='//served-by.pixfuture.com/www/delivery/headerbid.js'

         script.setAttribute("slotId","YOURADUID_ADSLOT1");

         script.setAttribute("refreshInterval",30);

         script.setAttribute("refreshTime",5);

         document.getElementById("YOURADUID_ADSLOT1").appendChild(script);

        }

        </script>

     </div>

</div>