Controlling iFrames for CMS Users & Responsive Website Design

vickeryhillWeb Development

Responsive Content Management Systems with iFrames

It’s great when you can provide a client with a content management system (CMS) that allows them control a large variety of content assets and features all on their own like: maps, photo galleries, hours of operation, contact forms, social media, promotions, and more. But the more control they are given, the more opportunity CMS users potentially have to accidentally flaw the user experience. Seemingly harmless plugin elements like iFrames are typically free for the user to use on their site but may need a little developer preparation before having at it.

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

Before responsive website design, developers really only needed to worry about the end CMS user controlling content for a single page size.


Responsive website developed for Toursim Fernie BC.

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.

* Above Google Analytics sample is not actual client data.

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

Most content sites that supply iFrames to embed in your site set a default height and width of the code that the user embeds to their sites.


Example of iFrame from Google Maps for Businesses.

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


Need Help With Your Website or Content Management System?

Contact us for a free 30 minute consultation. Seriously. We love this stuff!