XF 1.3 Idiots guide to basic responsive AdSense please - top banner overlapping

sforum

sforum

Active member
Hi,

I apologise in advance, because I know there are already umpteen threads on AdSense and responsive design. I know this, because I have spent literally over a week reading them all, desperately trying to get mine to work, and have failed. I am therefore posting this out of desperation.

Now this is the point where @Brogan would normally come in and link to his very comprehensive guides on the subject. I have read these, and tried to follow the instructions, but something always seems to break.

I have decided to abandon all hope of having anything vaguely customised and have decided to settle on 2 simple AdSense banners - one above the top breadcrumb, and one at the bottom, below content.

So I went to the AdSense site, created the "Smart Sizing" responsive ad unit, and copied the code into the corresponding place (I use Rotating Ads). It all seems to work, except for one thing: the top banner overlaps the sidebar at certain screen widths!

Examples here, showing the style I actually use (Soft Responsive), but also the Default style exhibiting the same behaviour:

adsense_responsive_overlap.webp adsense_responsive_overlap_soft_responsive.webp

Can someone explain, in terms that a complete novice can understand, how to resolve this please?

I also want to display my own banner ads in the top location (hence why I use Rotating Ads, to flick between AdSense and my own, hosted PNG banners), but they always break iPhones/mobiles by being too wide (500px). I have read countless threads on the subject, and no matter what I try I cannot get this to work.

The main one is the AdSense problem. Although I would like to have my own banners, I guess I can do without them. I really need to get the AdSense sorted though, as this is the only thing that is holding up me rolling out my new forum upgrade to my users. :(

Please don't just point me to Brogan's (excellent) guide(s) - they are too techy for me. This is not just a case of lazyness (as is hopefully demonstrated by the length of this post and the time it has taken to write it out) - I think people sometimes forget that many of us XenForo customers are not coders, and haven't got a clue how to do things unless specifically shown.

If someone could give me exact, verbatim examples of how to correct this issue, I would really appreciate it. :)

Thanks.
 
Sort by date Sort by votes
sforum said:
It all seems to work, except for one thing: the top banner overlaps the sidebar at certain screen widths!
Click to expand...
Does it do that when you refresh the page?
AdSense doesn't dynamically resize.

If it still does it when you refresh the page then your trigger points are wrong.

This is what I have in my ad_below_top_breadcrumb for the trigger points.

Code: 
<style type="text/css">
.below-top-breadcrumb-with-sidebar-dynamic {
width: 234px;
height: 60px;
}

@media(min-width: 346px) {
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 320px;
    height: 50px;
    }
}

@media(min-width: 494px) {
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 468px;
    height: 60px;
    }
}

.below-top-breadcrumb-no-sidebar-dynamic {
width: 234px;
height: 60px;
}

@media(min-width: 346px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 320px;
    height: 50px;
    }
}

@media(min-width: 494px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 468px;
    height: 60px;
    }
}

@media(min-width: 754px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 728px;
    height: 90px;
    }
}
</style>

This is the full template, putting that into context:
Code: 
<xen:hook name="ad_below_top_breadcrumb" />

<style type="text/css">
.below-top-breadcrumb-with-sidebar-dynamic {
width: 234px;
height: 60px;
}

@media(min-width: 346px) {
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 320px;
    height: 50px;
    }
}

@media(min-width: 494px) {
    .below-top-breadcrumb-with-sidebar-dynamic {
    width: 468px;
    height: 60px;
    }
}

.below-top-breadcrumb-no-sidebar-dynamic {
width: 234px;
height: 60px;
}

@media(min-width: 346px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 320px;
    height: 50px;
    }
}

@media(min-width: 494px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 468px;
    height: 60px;
    }
}

@media(min-width: 754px) {
    .below-top-breadcrumb-no-sidebar-dynamic {
    width: 728px;
    height: 90px;
    }
}
</style>

<xen:if is="!{$visitor.user_id}">
    <xen:if is="!in_array({$contentTemplate}, array('', 'message_page', 'error', 'search_form', 'search_form_post', 'search_form_profile_post', 'search_results', 'register_form', 'register_facebook', 'register_twitter', 'register_google', 'login', 'error_with_login', 'contact', 'thread_view', 'cta_overtaking_index'))">
        <xen:if is="@enableResponsive">
            <xen:if is="{$sidebar}">
                <div style="text-align: center; padding: 8px 0">
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Below Top Breadcrumb (With Sidebar) - Dynamic -->
                    <ins class="adsbygoogle below-top-breadcrumb-with-sidebar-dynamic"
                         style="display:inline-block"
                         data-ad-client="ca-pub-1234567890"
                         data-ad-slot="64364356456"></ins>
                    <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            <xen:else />
                <div style="text-align: center; padding: 8px 0">
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Below Top Breadcrumb (No Sidebar) - Dynamic -->
                    <ins class="adsbygoogle below-top-breadcrumb-no-sidebar-dynamic"
                         style="display:inline-block"
                         data-ad-client="ca-pub-1234567890"
                         data-ad-slot="8674757643"></ins>
                    <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </xen:if>
        <xen:else />
            <xen:if is="{$sidebar}">
                <div style="text-align: center; padding: 8px 0">
                    <script type="text/javascript">
                    google_ad_client = "ca-pub-1234567890";
                        /* Below Top Breadcrumb Narrow */
                        google_ad_slot = "734762376";
                        google_ad_width = 468;
                        google_ad_height = 60;
                    </script>
                    <script type="text/javascript"
                    src="//pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                </div>
            <xen:else />
                <div style="text-align: center; padding: 8px 0">
                    <script type="text/javascript">
                    google_ad_client = "ca-pub-1234567890";           
                            /* Below Top Breadcrumb Wide */
                            google_ad_slot = "03274623";
                            google_ad_width = 728;
                            google_ad_height = 90;
                    </script>
                    <script type="text/javascript"
                    src="//pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                </div>
            </xen:if>           
        </xen:if>
    </xen:if>
</xen:if>
 
Upvote 0 Downvote
Brogan said:
Does it do that when you refresh the page?
AdSense doesn't dynamically resize.

If it still does it when you refresh the page then your trigger points are wrong.
Click to expand...

Yes, it looks the same when I refresh.

So can I just copy and paste the code you have provided, verbatim, above the AdSense code? I don't need to make any other modifications, or add anything to EXTRA.css or anything?

Thanks.
 
Upvote 0 Downvote
Brogan said:
As the guide states, the trigger points vary depending on the style.
You will need to work them out and create the corresponding CSS.
Click to expand...
In which case, is someone willing to get AdSense working on my site if I pay them, please? I have been struggling with this for over a week now and I cannot get it to work, and it is really starting to stress me out and affect my day job, amongst other things.

All I need is:

  • AdSense banners at the top and the bottom of the forum, which correctly adjust for device.
  • My own hosted banner ads (no more than 500px wide) at the top, which will scale to device or simply disappear if the device is too small to display them.

I have all of this working on my current forum, which is still running v1.1.3, but for some reason I cannot get it to work now that I have upgraded to 1.3.5 :(

If anyone can point me in the direction of someone willing to take on small paid jobs like this, please let me know.

Thank you.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

W
  • Question Question
XF 2.2 Idiots guide to Permissions needed?
Replies
1
Views
436
Paul B
P
JamesBrown
  • Question Question
Idiots Guide to Adverts
Replies
4
Views
1K
MattW
MattW
Back
Top Bottom