Welcome to WebmasterWorld Guest from

Forum Moderators: martinibuster

Message Too Old, No Replies

Should I set dimensions (per screen size) for responsive ads

Or at least have a definite container size.

12:13 pm on Jun 22, 2016 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:July 17, 2003
posts: 717
votes: 27

Just wondered what the best practice is here.

Should I directly set the ad size according to screen size using CSS / media queries e.g.

@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }

Or is it best to just allow Adsense to do its thing?

I'm mainly wondering whether setting the ad size will speed up the ad delivery as this sometimes seems a little slow on mobiles.

However, I'm also interested in whether controlling ad size is beneficial to revenue - or is it also a case of leave it to Adsense?

2:46 pm on June 22, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Mar 30, 2005
votes: 222

I leave it to AdSense, mostly because time spent tinkering around with it doesn't scale for me. At first I used the media queries to set the size, but I eventually decided that was probably limiting available inventory.
3:00 pm on June 22, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
votes: 825

Here is an example of the code that I use for my top banner ads:

<div class="col-sm-12 adbox01">
<div id="Top_ad">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style type="text/css">
.resp01{ height: 50px; }
@media(min-width: 768px) { .resp01{ height: 90px; } }
<ins class="adsbygoogle resp01"
style="display:inline-block; min-width:300px; max-width:728px; width:100%"
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

I use bootstrap for the page layout. The ad is contained in the col-sm-12 div and the only custom css I add is a change in the top and bottom margin as the page gets smaller. To ensure adequate spacing between ad and content.

Within the ad code I style it such that height of the ad is constrained, in this case I want the ad to be top banner ad, so I limit the height to 90px so that is conforms to the 728 x 90 ad format. This is for all screen size above 768px, smaller than 768 I limit the height to 50px (I will likely increase this to the 100px in the future).

Basically, I leave width unconstrained and limit height to get the format that I want on desktop. The height limit on mobile, ensures that as the screen width shrinks, that I don't end up with a 300x250 ad format. On ad units appearing at or near the bottom of the page I limit the height on mobile to 250px.

As for speed, the responsive ads are asynchronous, you may get the impression that they load slow, but this may be due to your page blocking resources as it loads. The async ads give priority to the main content. I doubt that adding constraints will in anyway speed-up the ad load time.