Re: Media Queries

Posted by GregChapman on Nov 14, 2016; 3:28pm
URL: https://support.nabble.com/Media-Queries-tp7597404p7597519.html

Harvey wrote

Every ad in your google adsense account has a specific number.

In which case I guess that line in the format is a "seed number" and the JavaScript increments it in some way so a different advert appears when appropriate.

I am trying to figure out some kind of if/then statement that that pulls
 the 728 x 90 unless the screen width is less than say 1000px. In that case it
would pull a different ad_slot that is a 320 x 100.

The example code from Google does exactly that with the two lines of styling code:

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

These say "make the contents of any "ins" tag of the class "footer_1" show in a "box" that is 320x100px - but if the screen is 800px or wider show those same contents in a box 728x90px"

So I think the macro ought to read:

<override_macro name ="show_custom_ads" parameters="location" requires="servlet" >
    <n.as_html_comments.location/>
    <n.if.regex_matches text="[n.location/]" pattern="classic_special_ad">  
        <then>
            <div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <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>
        </then>
    </n.if.regex_matches>             
</override_macro>

The areas where I have doubts about the code are:

<div class="ad shaded-bg-color rounded" style="padding:.5em 0">
The original Google code had some styling attached to the "div": style="text-align:center;
You might need to add the text alignment instruction to the padding instruction. Alternatively it might be handled already by whatever styling is added through the styling of anything of class "ad".

data-ad-slot="7560709341"
I am in your hands when it comes to which of the various advert numbers in your sample code should be used.

And more fundamentally, I still don't understand enough about why Hugo was supplying code that would produce a fixed size for the box that holds the ad as your brief in this topic, at least, was for something that was mobile-friendly, so I assumed needed to respond dynamically according to the device the page was being viewed on.

Obviously, I would recommend that you take a copy of the entire macro in place on your forum currently, before attempting to edit it with the code above. I could be hopelessly wrong about its effect!