Iframes CSS

[rarkmoberts]

Hey,

I have started to run ads on my website and I’ve noticed that some of the ads in the content aren’t appearing in the center of the content and are left-aligned.

I’ve been told this CSS is the culprit

And if I remove the iframe {width:100%;max-width:100%;} CSS it should fix the problem.

But I’m not sure how to remove that CSS. When I go to appearance > customize > CSS I don’t see this. So what do I do?

[ruenel]

Hello Mark,

Thanks for posting in!

You cannot remove built-in styling or the default element styling of the theme. What you can do is override the styling instead. To do that, simply change the width from 100% to auto and the maximum width can be changed to none. Hence, the appropriate css code that you can add in Appearance > Customize > CSS would be:

iframe {
  width: auto;
  max-width: auto;
}

Hope this helps.

[rarkmoberts]

Hi Ruenel,

I added the CSS code to the customizer that you recommended, but it seemed to only impact the ads in the header and the footer.

But I changed the code to this:

.entry-content iframe {
width: auto;
max-width: auto;
}

And that seems to have fixed the problem of the content ads floating to the left.

Just a quick question. In your reply, you said to change the maximum width to none, but in the CSS you recommended to change it to auto. So should I set it to none or auto?

[rarkmoberts]

Sorry, just following up on this. I’ve noticed that by adding the above CSS that the ads to go to the center, but in some cases a part of the ad gets cut off.

For example, here is an ad before adding the CSS. You can see it’s full-size but appearing on the left.

And here it is after adding the CSS. You can see it’s in the center but the right side of the ad has been cut off.

Do you have any idea for how to solve this?

[jade]

Hello Mark,

Is there a chance that you can provide us with the direct like to the page where the ad is present so that we can check it?

I tried to access the site that is in your account but I can’t seem to find the page where the ad is.

Thank you.

[rarkmoberts]

Hi Jade,

Ads will appear on all pages on my site https://kr4m.com/ but you may see different ads than me based on your geographic area and other factors.

I have removed the code:

.entry-content iframe {
width: auto;
max-width: auto;
}

From my site because it was cutting off the ads as mentioned in my last post. So if you visit my site you should see some of the ads in the content appearing aligned to the left, which is the problem I’m trying to solve. Strangely, not every ad in the content appears aligned to the left and some appear in the center as they should.

[rad]

Hi Mark,

It seems the issue is with the ads itself, some adds apply static width and height, not in the iframe but on the actual wrapper of the iframe. Hence, it’s it’s set to auto, it follows the width of the wrapper in which narrower than the iframe.

Sometimes it doesn’t have the restricting size as the ads changes/rotate

Is it a plugin? For that, I recommend contacting the plugin author.

Thanks!