AdSense ad display in media queries

Question

I am creating a new layout for my website and I have AdSense ads there. I have read that you can have up to 3 ads on one page.

I am creating responsive design now and I want to use 4 ads but 3 will be shown. Let me explain it.

In PC media-query 3 ads will be in sidebar. In Mobile media-query 2 ads will be in sidebar and 1 in the content because sidebar will be at bottom of the page so I want to have one on top.

And if I am writing the same HTML for the both media-queries I have to include code for 4 ads and then just style them with css:

overflow:hidden;

Is it enough or not? If it isn't enough tell me what should I do.

Answer 1

You should refer to google documentation on how to modify responsive ad code

If you want to only show ads for certain screen sizes you can use CSS to accomplish this. The following example shows you how to modify your ad code to use CSS3 media queries to hide ads for specific screen sizes:

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>