How do I hide 336x280 Adsense in Mobile and Show the Responsive ad instead?


#1

I have added 336x280 Adsense below post title inside the first paragraph floating left. In mobile the ad also shows. I want to hide it in mobile and add responsive adsense in its place showing in mobile and hidden in desktop. What I did was adding below code inside head tags and then I edited

of my adsense to make it exactly this: <div class='desktop-only' style=...>adsense code here</di>. But it wont work. The 336x280 adsense still shows both on desktop and mobile.
//medium+ screen sizes
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}
 
//small screen sizes
@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }
 
    .desktop-only {
        display:none !important;
    }

}

Can you please tell me what to do? Thank you so much in advance.


Update: Here is the fix on how to show and hide Mobile Responsive AdSense Ads in Blogger


#2

I would like to know that too.

Thank you


#3

Note: The above approach can cause you loose your AdSense account!

It is strictly against Adsense TOS or any Ad network TOS to apply CSS Display none property to hide Ad units on different mobile screens. The JavaScript will still execute despite the ad being hidden. Your users will not see the ad but the Ad will still load in background and deliver page impressions to AdSense. You may stop this asap

How To show Responsive AdSense Ad units in Blogger?

AdSense now offers Responsive Ad units which adjusts automatically to any screen size provided that your template is responsive by default. So if your template is responsive and fluid then you can follow these steps.

  1. Generate the ad code from your AdSense account.
  2. To generate the ad code for a responsive ad unit:
  • Create an ad unit in the usual way, making sure to select first option i.e “Automatic size, Responsive”, and click Save and get code.
  1. Place the ad code on your blog.

Specify Exact Sizes for Your Ad unit

The best thing about responsive ad units is that you can also specify which Ad size to display for a particular screen size. Although Adsense can do it automatically for you but if you choose you can specify Ad sizes as per your choices

/*-----iPhone 2G, 3G, 4, 4S ----------*/
   @media only screen and (max-width:480px)  { .adslot_1 { width: 320px; height: 100px; } }

/*-----iPhone 5,6 ----------*/
   @media only screen and (max-width:568px)  { .adslot_1 { width: 480px; height: 60px; } }

You can also test your AD on different devices and screens to make sure that the responsive behavior is working correctly. Try Mobile Test Me

This is the only method to display responsive Ad units in Blogger templates and most recommended one too. Hope this answers your question buddy :innocent:


Why is AdSense is no more showing three Content units on a Page?
#4

Hi @Mohammad, what happen if i use overflow:hidden on .post css, so that when adsense wider than the screen, it will be truncated. it violates the TOS?


#5

No editing to the Ad’s actual display can be made. Its style sheet can not be altered and neither the script in anyway.


#6

Hi Moh, I followed your advice. I replace the 300x250 ad in my post body with responsive ads, but the ad does not appear at all. what’s wrong? so I decided to use ad 300 again until get the solution


#7

Make sure you have not chosen the “Asynchronous” adsense code while copying the code, did you? The synchronous code works fine but the asynchronous code often shows a blank space and I guess it is still in beta


#8

Hi Mohammad, I have one question, My template is responsive like mybloggertricks. Right now i am using 300*250 ad units above the fold. Now my questions is can i still use normal adsense ads on mobile friendly blog or i will have to switch to responsive ads. I am bit confused. Please help.


#9

You can still use them but it is better that you switch to responsive ads for higher CTR and maximum performance. We just published a tutorial on how to use Responsive AdSense Ads in blogger and proposed the fix on why the ads returned a blank space.


#10