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

How to Customize Blog Pager ( Newer Post Home Older Post )

To change the pager name we can do the following steps.
Step1: Click on Template> HTML > Jump to widget, blog1 Then expand this line.

As shown in the image.
Step 2:Do This.
Ctrl+F for <data:newerPageTitle/>
OR watch this line <data:newerPageTitle/> in the image as given below.and replace it with own name e.g. Newer Essay etc Step3: Similarly do this.
Ctrl+F for <data:olderPageTitle/>
and replace this by own text e.g. Older Essay etc.
Result of this edit: See the image given below ; which is obtained after edit.

How to add post Header in title bar of the website. Better Ranking in SE |Blogger|Blogspot

Very successful . After doing it my title . Before it the post title were not appearing in the title bar of my website. Also other advantage of this is that the site name was getting appering after post title in search result pages. See the location of the code highlighted. It will help you to find the location of the code pasting.Click to zoom it.

Title bar has got the title of the post when i click on any post link.
It  improved my site rank in search engine.
My original title of free essay code

Edited code for better ranking in google SE

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>

Follow by Email