Using iFrame to display HTML5 Responsive Ad

Hi iantiu,

Thanks for asking this question.

Generally, I would insert responsive HTML5 ads as described in our manual.

However, if you want to keep your fixed scale values, you can duplicate the ad and target it to different browser sizes using the Responsive Ads add-on.

Alternatively, you could test if you can consider different scale values when using media queries and CSS. You can find here some ideas about how you might do that.

Best regards,
Joachim

This is what I got using the exact snippet in your manual while changing the src url.

In my ad setting, I’ve set media to width of 728 and height of 70, and checked the option “Reserve this space”. I can change background to white to match my site. Any clue how to fix this? I used the media queries/css option as suggested in option 3 but it affected the entire site and made it look off. Thanks for your help! ??

Media Link:
https://themislabeledspecimen.com/capture-7/

I don’t have the ad code and just make assumptions and guide you in the correct direction.

I don’t recommend reserving the space of 728×70. This setting does not scale the ad, it only reserves the space and this setting will apply also to mobiles, where you don’t want to inject an ad with this size.

“used the media queries/css option as suggested in option 3 but it affected the entire site and made it look off.”

The code snippet from #3 refers to .entry-content. If you use placements, you will see in the browser console that each placement has an individual class like .themi-in-content-ad-2 for an existing content placement on your website.

You can also apply a class or ID to the specific ad unit.

Best regards,
Joachim

I tried to replace .entry-content with .themi-in-content-ad-2 but nothing happened. I’m probably not doing it correctly…

@media screen and (max-width:700px){

    .themi-in-content-ad-2{margin:0 -1.5em!important;;width:auto;max-width:none;overflow:hidden}
    .themi-in-content-ad-2 iframe{
       width:200%;
       margin:0;
       max-width:none;
       transform:scale(.5);
       transform-origin:left top;
    }
    .themi-in-content-ad-2 code{display:block;max-width:100%;}
}

If I am to use a container ID for each ad (e.g. container id = html5ad), how do I use it with the above code?

• This reply was modified 2 years, 7 months ago by iantiu.

Hi,

You can use CSS to address not only classes but also ID selectors. For this, you do not use .class-name but #ID-name.

If you have this problem with multiple ads, I will not choose an ID but assign these ads an additional CSS class via the similar Advanced Ads option.

Best regards,
Joachim

I got it to work…eventually ??

<iframe class=”myID” alignment =”center” scrolling =”no” width=”100%” height=”100%” src=”https://themislabeledspecimen.com/wp-content/uploads/html5/TechLab_Q1_QuickCheck_Poll_728x90/index.html&#8221; style=”-webkit-transform:scale(0.86);-moz-transform-scale(0.86);-moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left;”></iframe>

@media screen and (max-width: 600px){
  	.myID {
	-moz-transform: scale(0.93)!important;
	-webkit-transform: scale(0.93) !important;
	}
}

I got the idea from you guys and I did a lot of trial and error. Thank you.

Hi iantiu,

Congratulations to make this issue disappear.

Best regards,
Joachim