Codepen Embedded iFrame too wide on mobile devices (Oxygen)

Earlier this evening i embedded a codepen iFrame into my Oxygen post and encountered a width error on mobile devices where the iframe renders far too wide and the text appears much larger. After searching it was noticed that you can't force the width of the iframe back to a normal size with something like iframe {width: 100%;}. To get around this issue i added the following code to my global stylesheet inside the Oxygen builder.

@media (max-width: 375px) {
.cp_embed_wrapper iframe {
width: 320px !important;
}
}

Hope this can help save someone a little browsing time if they were to encounter the same issue.

The original source for this fix can be found here: https://blog.codepen.io/documentation/features/embedded-pens/

Proudly designed by Set The Pace Designs

FOLLOW ME

BE IN TOUCH

setthepacedesigns@gmail.com
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram