Change iframe content depending on screen size

Question

Hello I have a problem I have an ad that can't be resized, the support said that I can use 2 ads 1 for mobile 1 for desktop so the ads are 720 x 90 and the other one is 300 x 100 i want it to change depending on scree size to switch between this two:

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

and

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

if anyone can help me I will really appreciate it. Thanks.

Answer 1

You can code both of these items and hide one via CSS depending on the browser size.

<iframe class='lg' border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

<iframe class='sm' border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

CSS :

@media (max-width: 719px) { //set max width to your preferred mobile width.  I used 719 because your large banner is 720.
    .lg {display:none;}
    .sm {display:initial;}
}

@media (min-width: 720px) { //set min width to be larger than the css rule above.
    .lg {display:initial;}
    .sm {display:none;}
}