Mobile REsponsive Ads

It seems the ad code can’t determine container width on homepage.

In order to work as expected you should always define container width.

Responsive AdSense example:

<style type="text/css">
.responsive { width: 300px; height: 280px; }
@media(min-width: 340px) { .responsive { width: 336px; height: 280px; } }
@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive -->
<ins class="adsbygoogle responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-04337897263632"
     data-ad-slot="238946274677"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Hey @spacetime

Making good progress on this and just testing the very top homepage ad now before deploying it to all other ad units.

Here is my explanation (1-2 min video) and just asking your opinion on adding to the code a bit to handle even lower screen dimensions even more than where we are now:
https://www.screencast.com/t/cAZluFeeWzOh

Here is the very top ad on the homepage I am testing with the below code FYI:
https://bit.ly/2oe1eZd

Here is what I have now:
<div style=”text-align: center; margin: 5px 0;”>
<style>
.VC_Top_Header_Page_Responsive { width: 320px; height: 100px; }
@media(min-width: 500px) { .VC_Top_Header_Page_Responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .VC_Top_Header_Page_Responsive { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– VC_Top_Header_Page_Responsive –>
<ins class=”adsbygoogle VC_Top_Header_Page_Responsive”
style=”display:inline-block”
data-ad-client=”ca-pub-6668989118972941″
data-ad-slot=”5253432126″>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

??

Greg

Hey @spacetime

Making good progress on this and just testing the very top homepage ad now before deploying it to all other ad units.

Here is my explanation (1-2 min video) and just asking your opinion on adding to the code a bit to handle even lower screen dimensions even more than where we are now:
https://www.screencast.com/t/cAZluFeeWzOh

Here is the very top ad on the homepage I am testing with the below code FYI:
https://bit.ly/2oe1eZd

Here is what I have now:
<div style=”text-align: center; margin: 5px 0;”>
<style>
.VC_Top_Header_Page_Responsive { width: 320px; height: 100px; }
@media(min-width: 500px) { .VC_Top_Header_Page_Responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .VC_Top_Header_Page_Responsive { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– VC_Top_Header_Page_Responsive –>
<ins class=”adsbygoogle VC_Top_Header_Page_Responsive”
style=”display:inline-block”
data-ad-client=”ca-pub-6668989118972941″
data-ad-slot=”5253432126″>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

??

Greg

The code is OK. You can add a smaller ad size if you would like to support lower resolutions e.g. 234×60 but this would affect only very few mobile phones.

@spacetime

Thanks for the reply. But, could you actually show me a snippet and where to add the code in my example code above to get that work? I have tried adding but could not seem to get it to work right.

??

Try this CSS code:

<style>
.VC_Top_Header_Page_Responsive { width: 234px; height: 100px; }
@media(min-width: 350px) { .VC_Top_Header_Page_Responsive { width: 320px; height: 100px; } }
@media(min-width: 500px) { .VC_Top_Header_Page_Responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .VC_Top_Header_Page_Responsive { width: 728px; height: 90px; } }
</style>

@spacetime

Cool…

Should the height here be 30px though instead of 100px?

@media(min-width: 350px) { .VC_Static_Middle_Responsive_2 { width: 320px; height: 100px; } }

??

No, as the ad will resize according to the available container size and possible ad heights.

Roger that…