DoubleClick for publishers: Specify browser and ad dimensions
<p>I'm trying to get banners to load according to the browser size. So in a location where i have a 728x90 banner, a 300x250 will show if its on mobile.</p>

<p>Problem is, the 728x90 loads on desktop. but on mobile the 300x250 doesn't show.</p>

<p>I tried following the example <a href="https://support.google.com/dfp_sb/answer/4525701?hl=en">here</a></p>

<pre><code>&lt;script type='text/javascript'&gt;
 googletag.cmd.push(function() {
    // This mapping will only display ads when user is on desktop sized viewport
    var mapLeader = googletag.sizeMapping().
        addSize([0, 0], []).
        addSize([768, 200], [728, 90]).
        build();

    // This mapping will only display ads when user is on mobile or tablet sized viewport
    var mapLeader2 = googletag.sizeMapping().
      addSize([0, 0], []).
      addSize([768, 200], []). // Desktop
      addSize([300, 200], [300, 250]). // Tablet
      build();

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0').
        defineSizeMapping(mapLeader).
        setCollapseEmptyDiv(true).
        addService(googletag.pubads());

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0').
        defineSizeMapping(mapLeader2).
        setCollapseEmptyDiv(true).
        addService(googletag.pubads()); 

    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableSyncRendering();
    // Start ad fetching
    googletag.enableServices();

});
&lt;/script&gt;
</code></pre>

<p>and in my HTML</p>

<pre><code>&lt;!-- /XXXXXX/leaderboard-1 --&gt;
&lt;div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center"&gt;
    &lt;script type='text/javascript'&gt;
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
    &lt;/script&gt;
&lt;/div&gt;
&lt;!-- /XXXXXX/medium-rectangle-1 --&gt;
&lt;div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'&gt;
    &lt;script type='text/javascript'&gt;
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); });
    &lt;/script&gt;
&lt;/div&gt;
</code></pre>

<p>do i have to put the <code>&lt;div&gt;</code> for each size in the same location? How do i get the 300x250 banner to load? the 728x90 works fine. I know i could hide / show according too browser size using CSS. but i don't want to do that. Loading multiple sizes in the same location slows down my sites loading.</p>