Controlling iFrames for CMS Users & Responsive Website Design
Responsive Content Management Systems with iFrames
Below is a brief explanation of how iFrames added to your CMS can ‘muck-up’ your responsive web applications. Following is a simple CSS trick for taking back control.
Before Responsive Web Design
These days we need to consider how elements are displayed and controlled by the CMS author from 320px wide on your standard iPhone to 3840px wide on monster desktop monitors, plus every pixel variation in between.
It is NOT the CMS end user’s responsibility to QA all resolutions when they add content to every page. They will expect it to work. It’s you, the developers’ job to think of how it can possibly be broken and find scaleable solution to fix the problem before it happens.
Those Pesky iFrames
We need to find a way to allow for the width of the iFrame to be flexible and span consistently across the width of the variety of devices they will render upon.
The Solution
iFrames applied to standard WYSIWYG content managed field can be easy to overlook but simple to control with a little simple CSS even if you don’t know what type of iFrame content your CMS user might employ in the future: YouTube, Vimeo, Google Maps Business View, etc. You can’t control the dimensions and inline styles of the iFrames but you can override the styles by adding this simple rule to the containing DOM element the iFrame lives in:
.your-dom-container-name iframe {
max-width: 100%;
height: 100%;
width: 100%;
}
The Results
