Skip to main content

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.


Popular posts from this blog

My all Chrome Bookmarks of Blogger Example

These bolgger tutorial sites are very imprtant.


Very Important Margin Padding Edit for Blogger

How to reduce margin of my right side sidebar of blogger by css This will reduce the gap between right border and right inner side, margin. #sidebar-right-1 { margin-right:-10px; } This will reduce the gap between left border and left inner side, margin.[ .column-right-inner] this code will reduce the gap between right side sidebar and blog post left side
#sidebar-left-1 { margin-right:-20px; } .column-right-inner { margin-left:-25px; } How to reduce margin of my left side sidebar of blogger by css
#sidebar-left-1 { margin-left:-10px; }
How to hide navbar of blogger by css
#navbar-iframe {    display: none !important; }
How to control sidebar widget of blogger|Border|Margin|Padding|Background .sidebar .widget { background:#ffffff;  border: 1px solid #999999;  margin: 0px 0px 0.5em 0px;  padding:0px 0px 0px 3px; border:2px solid #E6E6E6; }
How to make style of text of blogger | Hover | control font style h4:hover{ font-size:2em; background-color:red; }
All this posted and published in the blog

Follow by Email