Quick Help

The knowledgebase is a categorized collection of answers to frequently asked questions (FAQ) and articles. You can read articles in this category or select a subcategory that you are interested in.



 How to create responsive ads.

Solution

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_RANDOMNUMBER" style="width:300px;height:600px;margin:0;padding:0">

        </div>        

        <script type="text/javascript">

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

          var OX_ads = OX_ads || [];

          OX_ads.push({

             slot_id: "YOURADUID_RANDOMNUMBER",

             auid: "YOURADUID"

          });

        }

        </script> 

        <script type="text/javascript" src="//pixfuture-d.openx.net/w/1.0/jstag"></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:300px;height:600px;margin:0;padding:0">

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

        </div>        

        <script type="text/javascript">

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

          var OX_ads = OX_ads || [];

          OX_ads.push({

             slot_id: "YOURADUID_RANDOMNUMBER",

             auid: "YOURADUID"

          });

        }

        </script>

        <script type="text/javascript" src="//pixfuture-d.openx.net/w/1.0/jstag"></script>

     </div>

</div>