WordPress.org

Forums

How to: Automatically change ad sizes in a responsive theme (6 posts)

  1. sonyxperiageek
    Member
    Posted 1 year ago #

    Hi folks,

    Sorry for posting so often, but this should be my last problem I have - These three were my top problems and I have been trying to fix them with no avail.

    Anyway, on http://nztechblog.net if you resize the browser to a mobile page view, the Leaderboard (728x90) ads go off the page. Is there any way that when the Leaderboard ad gets too wide for a mobile view, to automatically switch to a smaller mobile banner ? I.e change the script when the responsive page gets smaller?

    I'm not sure if I should be posting in this forum, or in my theme page's sub forum because they are both related.

    Thanks in advance!

  2. C W
    Member
    Posted 1 year ago #

    Yes. Create two ad units in AdSense: one large and one small. Then include the code for both but encase each of them in div layers with a distinct class: e.g. large and small. Then use CSS media queries to interchange .large and .small depending on the screen size.

    .small {
       display: none;
    }
    
    @media screen and (max-width:800px) {
       .large {
          display: none;
       }
       .small {
          display: block;
       }
    }

    EDIT: Actually, don't do that. Apparently display: none solutions are not allowed by AdSense policies. (I'm not very familiar with AdSense so I apologise for the confusion.) The top answer at the link I've just provided points to how you might achieve this without violating Adsense policies.

    EDIT 2: Google has helpfully explained what techniques are and aren't allowed, and provided tips on how to manage ads in a responsive design. Have a read through the linked document.

  3. Pioneer Web Design
    Member
    Posted 1 year ago #

    Load two scripts inside two divs that are one after the other. Purely an example:

    @media screen and (min-width: 728px) {
    div.new_syle1 {
    display:none;
    }
    div.new_style2 {
    display: block;
    }
    }
    
    @media screen and (max-width: 727px) {
    div.new_syle2 {
    display:none;
    }
    div.new_style1 {
    display: block;
    }
    }

    You will need to include the script for a smaller ad in the div that will display on smaller screens and the full size one will be in the div that will display on larger screens:

    <div class="new_style1"><script_for_small_ad_here></div>
    <div class="new_style2"><script_for_large_ad_here></div>

    This may be more helpful:

    http://codex.wordpress.org/Function_Reference/wp_is_mobile and is probably better when done properly to only output certain items when a mobile device is used...(above will output both ads, but only display one based on viewport size, and the ad co. may balk) although wp_is_mobile does not detect all mobile devices, just the more common ones.

  4. sonyxperiageek
    Member
    Posted 1 year ago #

    Cyril and Pioneer: Thanks for your tips. But I think Pioneer's way is also incorrect then.

    If I follow the Responsive Design way as in the Google link you sent me Cyril, where would I put the ad codes in that script?

    Thanks.

  5. C W
    Member
    Posted 1 year ago #

    Don't copy the code directly from that support page: go to AdSense and generate the ad unit code as normal, but make sure you select "Asynchronous". Then style the CSS by using media queries as shown in the example code of that Google page.

  6. sonyxperiageek
    Member
    Posted 1 year ago #

    I'm actually using Google DoubleClick for Publishers and I found this site: https://support.google.com/dfp_premium/answer/3423562?hl=en but am not sure how to implement it.. by reading that page do you know how I could proceed please?

    Thanks a lot!

Topic Closed

This topic has been closed to new replies.

About this Topic