Jun 28, 2017

How to Control Adsense Ad Sizes with Media Query at Various Screen of Different Dievices

This technique of controlling responsive ad sizes is very important if you need to control certain type of ad size to appear on desktop or mobile or other devices. It is because the responsive adsense ad codes normally shows 728x90 banner on desktop and 328x250 ad size on mobile.

But when you need to make appear other ad code format on desktop say 728x250 size, then media query do a great job.

These setting are vey important to control the RESPONSIVE ad units. It is because responsive ad unit will not perform better only by placing the plane ads. You need to match it according to your webpage to earn maximum. That is why google reccommends for these setting if you can.

Note: if you are unfamilia with media query. Then don't try , because it may disturb your ad code. Only try if you are well known to it. I reccomend you to create a template backup before trying it.
How to Control Adsense Ad Sizes with Media query at Various Screen of Different Dievices

Example 1 : Suppose it is needed to show an ad on three screen with various width say on mobile , tablet and desktop. The size of the mobile screen is less than 400px and the size of the tablet screen is less than 800px and greater than 500px. The desktop screen is obviously greater than 800px. The code explained in example 1 will control the ad sizes on all these three screen.

Here is the total code as discussed in Example 1.

<style> .ad1 { width: 400px; height: 250px; } @media(min-width: 500px) { .ad1 { width: 600px; height: 250px; } } @media(min-width: 800px) { .ad1 { width: 728px; height: 250px; } } </style> <!-- ad1 --> <ins class="adsbygoogle ad1" style="display:inline-block" data-ad-client="ca-pub-XXXXXXX11XXX9" data-ad-slot="8XXXXX1"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

Example 2: Suppose It is needed to hide an adsense code of size 728x90 or 1270x90 etc on mobile device, then this media query code can be implemented.

<style type="text/css"> @media (max-width: 600px){ #ad2 { display: none !important; } } </style> <div id='ad2' style='height:90px; width:1270px;'> <script> ADCODE 2 </script> </div>

Ad2 will be hidden for width upto 600px, but if the Ad2 width is of width 601px and more, then it will be displayed. In above case the width is 1270px.

Adding !important is compulsory to stop the ad's display on a screen less than 600px width. In this setting the ad will be shown by utilising 100% width of a screen more than 600px.

Dear friends if you have any ideas or suggestions then comment below.

No comments:

Post a Comment