Re: Media Queries

Posted by GregChapman on Nov 13, 2016; 4:07pm
URL: https://support.nabble.com/Media-Queries-tp7597404p7597510.html

I have no experience is with sites that use Google Ads. I also know nothing of JavaScript, so I'm taking some big guesses that could well be wide of the mark with this response...

Here's my analysis of this code:

<div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <script type="text/javascript">          
                    google_ad_client = "ca-pub-0XXXXXXXX";
                    /* Leaderboard */
                    google_ad_slot = "9529659947";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    google_page_url = "<n.current_url/>";
                </script>
                <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>

What I see in the above is calls to two scripts that do the business of displaying the add. The first hard codes the width and height of the ad and the second picks the ad to display from Google's library of ads to be used.

Now to the code Google recommends...
This would appear to be more modern code that uses a mobile friendly approach. Rather than fixing the size for the ad it uses CSS techniques for sizing the adverts to the space available...

<div style="text-align:center;">
    <style type="text/css">
      .footer_1 { width: 320px; height: 100px; }
      @media (min-width:800px) { .footer_1 { width: 728px; height: 90px; } }
    </style>
    <ins class="adsbygoogle footer_1"
      style="display:inline-block;"
      data-ad-client="ca-pub-0XXXXXXXX"
      data-ad-slot="7560709341">
    </ins>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

What I see in this is:
1. Some styling code that is to be applied to an HTML element given the class "footer_1" (See * below)
2. An "ins" element (i.e. something that's being inserted in a page) assigned two classes
3. The first class relates to the second script that follows, the second to the styling already mentioned
4. The code within the "ins" element provides the arguments necessary to following script.
5. A script, which using data from the "ins" element picks the advert to display (This is similar to the second script in your current code)
6. A second script that actually injects/pushes the advert into the "ins" element into the page at the point where it appears on the page.

* The styling uses Google's recommended approach to mobile friendly coding. It sets up a default position for the advert suitable for a small screen at 320x100px, and then over-rides that for screens 800px and wider.

The code would seem to be a a direct replacement for what you are currently using. The advantage being that it allows you to to control the the appearance/size of the advert that is displayed with CSS.

My best guess, therefore, would be to replace the code within your "div" with Google's.
I also guess that the "google_ad_slot = "9529659947";" refers to your account with Google so you may need to substitute substituting that for the original in Google's ample code.

It you understand my reasoning and it works!