💡 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.
Installation
All you need to do is just to add this code exactly where you need the Banners to be showing:
<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>
<div class="mobileShow"> Your code snippet for mobile </div>
<div class="mobileHide"> Code snippet for desktop only </div>
❗️Don't forget to insert Banner codes from your personal area instead of 'Your code snippet for mobile' and 'Code snippet for desktop only'.
You can use any method of installation: directly to HTML (however, not into the <head> section), by adding widgets / gadgets, custom HTML element, etc.
The most optimal combination is 728x90 and 320x50 Banners, however, you can choose any you like.
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.