Hiding Larger Adsense Ads on Lower Resolution Devices.
Suppose you decide to make mobile compatible responsive website then decide which adsense unit you are going to use. Suppose You are Showing 728 x 90 ad unit on your blog or site currently then your site may be overflowed on the mobile devices. Visitors will not be able to get proper view.
This article will explain you how to put adsense code on your blog which will be hidden from mobile devices.
Step 1 : Put Adsense Code into Div Element
If you are showing adsense ad unit or any other ad unit on your blog then put adsense code in div. Put all the ad units by considering Media Type as Desktop / Laptop Screen.
|
1 |
<span style="color: #308080"><</span><span style="color: #003060">div</span> id<span style="color: #308080">=</span><span style="color: #800000">"</span><span style="color: #1060b6">AdsenseAdUnit</span><span style="color: #800000">"</span><span style="color: #308080">></span><span style="color: #308080"><</span><span style="color: #308080">/</span><span style="color: #003060">div</span><span style="color: #308080">></span> |
and here is the CSS code for your Div -
|
1 2 3 4 5 6 7 8 9 |
<span style="color: #308080">#</span>largeCSS <span style="color: #406080">{</span> <span style="color: #7779bb;font-weight: bold">color</span><span style="color: #308080">:</span> <span style="color: #008c00">#</span><span style="color: #008000">336699</span><span style="color: #406080">;</span> <span style="color: #7779bb;font-weight: bold">font-family</span><span style="color: #308080">:</span>arial<span style="color: #406080">;</span> <span style="color: #7779bb;font-weight: bold">border</span><span style="color: #308080">:</span><span style="color: #008c00">#</span><span style="color: #008000">0000FF</span> <span style="color: #008c00">0</span><span style="color: #006600">px</span> <span style="color: #074726">solid</span><span style="color: #406080">;</span> <span style="color: #7779bb;font-weight: bold">width</span><span style="color: #308080">:</span><span style="color: #008c00">728</span><span style="color: #006600">px</span><span style="color: #406080">;</span> <span style="color: #7779bb;font-weight: bold">height</span><span style="color: #308080">:</span><span style="color: #008c00">90</span><span style="color: #006600">px</span><span style="color: #406080">;</span> <span style="color: #7779bb;font-weight: bold">margin-left</span><span style="color: #308080">:</span><span style="color: #074726">auto</span><span style="color: #406080">;</span> <span style="color: #7779bb;font-weight: bold">margin-right</span><span style="color: #308080">:</span><span style="color: #074726">auto</span><span style="color: #406080">;</span> <span style="color: #406080">}</span> |
Step 2 : Check Site on All Resolutions
Make sure that site works properly on laptop and desktop devices. PC or laptop have normally resolution more than 1024px. You have put 728X90 Leaderboard on your blog/site. Goto quirktools and check your site on lower devices such as Tablet or Notepads. Make sure that your large Leaderboard still showing in proper way.
Step 3 : Check On Mobile Devices
Now when you check your site on devices with lower resolution 480×800 or some lower resolution devices then you can see that your ad unit does not fit in the available space.
Step 4 : Using CSS3 Media Queries
|
1 2 3 |
<span style="color: #406080">@</span><span style="color: #004a43">media</span> <span style="color: #004a43">screen and (max-width: 750px) </span><span style="color: #406080">{</span> <span style="color: #200080;font-weight: bold">div</span><span style="color: #308080">#</span>largeCSS <span style="color: #406080">{</span> <span style="color: #7779bb;font-weight: bold">display</span><span style="color: #308080">:</span> <span style="color: #074726">none</span> <span style="color: #406080">}</span> <span style="color: #406080">}</span> |
Using this media query we are hiding the div element on the devices those having maximum width of 750px.