Forum Moderators: martinibuster

Message Too Old, No Replies

Limit height of responsive ad unit

Mobile: full width / fixed height

         

surfgatinho

10:37 am on Jun 21, 2018 (gmt 0)

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



I've been trying to limit the height of an above the fold adsense unit for mobiles, with pretty limited success. I'd like a text-only ad to appear full width but at a max height of around 120px.

I have managed to get something working on one site, but the same implementation doesn't seem to work on another. Also, I'm a little dubious about the coverage - I see a lot of blanks. On the other site I seem to get nothing or the ad actually spills over the div, covering the content below.

First thing I'd like to know is if there is inventory for this size ad. I was under the impression text ads were pretty dynamic and could be moulded to most sizes / shapes?

The code I am using is along these lines:

(#mobile-header is set to height: 120px; in the CSS)

<div id="mobile-header">
<style>
.mobile-top { display:none; }
@media(max-width:767px) {.mobile-top{display:block;} }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Mobile - Top -->
<ins class="adsbygoogle mobile-top"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


I'm also getting this error a lot:
"adsbygoogle.push() error: No slot size for availableWidth=0"

I was guessing this was related to hiding the ad slots with the media queries.

Any ideas, thanks.

No5needinput

1:11 pm on Jun 21, 2018 (gmt 0)

10+ Year Member Top Contributors Of The Month



Try display:inline-block instead of display:block

Specify an expandable width and a fixed height
[support.google.com ]

NickMNS

1:55 pm on Jun 21, 2018 (gmt 0)

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



There are several ways to achieve this.

1- You can change the parameter
data-ad-format="auto"
to "rectangle" or "horizontal".

2- To be more specific, you can set your height in the <style> tag of the ad unit:
<style>
.mobile-top { display:none; max-height:300px;}
@media(max-width:767px) {
.mobile-top {
display:block;
max-height:250px;
}
}
</style>

surfgatinho

4:17 pm on Jun 21, 2018 (gmt 0)

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



Seem to have it working now. Changed to "inline-block" and specified a height in the inline CSS. Also set the ad-format to "horizontal,rectangle"

Not sure which fixed it but thanks for the suggestions

tangor

11:06 am on Jun 23, 2018 (gmt 0)

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



The happy result is all that counts!