Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thanks Andrew – I saw that previously but is does not seem to indicate a fix that is reliable.
I would think with the gazillions of WP sites out there, that a solution would be somewhat more obvious to this issue…
anyone? It is driving me crazy!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
That thread I referred pointed out
The culprit CSS style.
embed, iframe, object {
max-width: 100%;
}
Hereby your solution
iframe {
max-width: none;
}
Thanks Andrew. I have a child style.css. should is imply add this to it:
iframe {
max-width: none;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Yes, add that to your Child Theme stylesheet.
If it doesn’t work first-time, try clearing your cache. If still not, add !important on the end of your style.
E.g
max-width: none !important;
Information on what !important does: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Thanks. Done. And it appears to work for the most part. I still catch it occasionally not working, but trying again solves the issue. What worries me is that readers may not be s patient!
Really appreciate the help!
Awesome! That solved my problem. Somewhere on the forum another approach seems to work as well:
.fb-like span {
overflow:visible !important;
width:450px !important;
}
First I though it worked, however the problem with this code is that it breaks any responsive layout for that it adds invisible space to one side of your layout. So when you check the layout on a mobile device for example you’ll notice additional space to the right. That’s kind of annoying. And it’s pretty confusing for users, because you have to double tap the display to focus wrapper in order to get the supposed look. That basically rendered my responsive layout useless.
iframe {
max-width: none;
}
…on the other hand doesn’t cause any trouble. Layout looks perfect on my Nexus, the way I intended it to be on small screens! Cheers mate, much appreciated!
I just want to say, THANK YOU SO VERY MUCH!
This was such an annoying problem, I was in the same situation as CaptainCrunch – the fix using the width property that is offered everywhere else just didn’t work right, as it messes up the layout on smaller screens. This iframe fix however works great on both bigger and smaller screens. Thank you!
