Google dfp ads with double id

Question

i use google dfp to serve my ads in website. I need to serve in different place on desktop and in different place in mobile, so i try to make it like this:

  .mobileShow { display: none;} /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .mobileShow { display: inline;}} .mobileHide { display: inline;} /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .mobileHide { display: none;}} 

 <div class="mobileShow"> <div id='div-gpt-ad-1421767832590-6' style='width:300px; height:250px;'> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1421767832590-6'); }); </script> </div> </div> <div class="mobileHide"> <div id='div-gpt-ad-1421767832590-6' style='width:300px; height:250px;'> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1421767832590-6'); }); </script> </div> </div> 

and i add my code: .mobileshow in the place i want to show in mobile and in desktop .mobilehide. but the dfp can serve only one code(id) in one page. the display:none; its not served but also the second code dont show. Can i have some help please

Answer 1

Instead of using you own CSS classes, I suggest you use DFP's builtin responsive ad support. You can define a size mapping so that your ads show up based on the viewport size.

See https://support.google.com/dfp_premium/answer/3423562?hl=en