Re: Media Queries

Posted by Harvey on Nov 12, 2016; 10:29pm
URL: https://support.nabble.com/Media-Queries-tp7597404p7597508.html

Here's a bigger issue.

This is my macro override for showing 728 x 90 display ads in my forum:

<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">
                <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>
        </then>
    </n.if.regex_matches>             
</override_macro>

but the 728 is too big for a phone.

Here is the code that google recommends to replace the 728 x 90 with a  320 x 100 on small devices:

<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>

How to tell my forum to use the smaller unit when width is below 800 px?