Displaying Different Banners on Mobile and Desktop | Adsterra Publishers Help Center

💡 Even though our Banners are not responsive, you can easily show and hide different sizes depending on the device. This simple CSS trick will show you how.

First, you need to add CSS into the <head> of the page:

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

In this code we declare that if the class of an element is .mobileShow, it should only be shown on mobile, and .mobileHide should only be available for desktop.

Next, just add the <div> elements and your Adsterra ad code to the page body:

<div class="mobileShow"> Your code snippet for mobile </div>

<div class="mobileHide"> Code snippet for desktop only </div>

For example, you can switch between 728 x 90 and 320 x 50 Banners.

Here's what is looks like in a regular HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>Hello World!</title>

    <meta name="robots" content="index,follow" />
    <meta property="og:title" content="Hello World!" />
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />


    <style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>
  </head>
  <body>
    <!-- the wrapper and content divs set margins and positioning -->
    <div class="wrapper">
      <div class="content" role="main">
        <!-- this is the start of content for our page -->
        <h1 class="title">Hello World!</h1>

      </div>
     <div class="mobileShow">
<script type="text/javascript">
	atOptions = {
		'key' : '0303d891ce479628509ef2972f7239d6',
		'format' : 'iframe',
		'height' : 300,
		'width' : 160,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/0303d891ce479628509ef2972f7239d6/invoke.js"></scr' + 'ipt>');
</script> </div> 
      <div class="mobileHide"> <script type="text/javascript">
	atOptions = {
		'key' : 'd6744e6de34f83085d99817829bdfc87',
		'format' : 'iframe',
		'height' : 90,
		'width' : 728,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/d6744e6de34f83085d99817829bdfc87/invoke.js"></scr' + 'ipt>');
</script></div>
    </div>

  </body>
</html>

https://mobile-desktop-adsterra.glitch.me/

WordPress

This will work on your WordPress site as well. First, you'll need to add the CSS classes to the CSS file:

Go to Appearance and select Theme Editor
Find 'Stylesheet' on the left
Scroll to the bottom of the file and insert:

 .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }

4. Click Update file

Next, just add the <div> elements and your Adsterra code snippets to any page body:

<div class="mobileShow">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> 
your adsterra code for desktop
</div>

Here's an example from the header.php file:

Blogger

Your Blogger-based website will support this as well. Just like with WordPress, add your CSS first:

Navigate to Theme from the left-hand menu
Click on the drop-down button next to Customize and select Edit HTML
Paste the CSS in to the <head>:

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

4. Click Save in the upper-right corner

Now you can use both classes anywhere. For example, to display different Banners in your header:

Go to Layout from the left-hand menu
Click Add a Gadget and select "HTML/JavaScript" from the list
Insert the following code with your ad code snippets:

<div class="mobileShow">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> 
your adsterra code for desktop
</div>

4. Click Save in the bottom-right corner

Checking if It Works

Chrome Dev Tools allows you to check how your website looks on different devices.

Open your website, right click anywhere on the page and select 'Inspect'; Chrome Dev Tools panel will open
Click Toggle Device Toolbar in the upper-right corner of the panel
Select the mobile device from the drop-down