Keep those pop-ups responsive

In the age of mobile devices, tablets, wearable media and personal toasters sites are becoming more and more responsive to the clients needs. The main content of the site has to be responsive to all those devices in every aspect which includes and content contained with pop-ups and iframes.

One challenge with iframes is they prefer their widths to be set when they are placed on the page so when the user squashes the content right down you may end up with scrollbars that just don't look good. A simple fix for this one is using style properties to make the width dynamic.

Old Version

<iframe src="https://mywebsite.com.au" frameborder="0" height="610" width="800" scrolling="auto" marginheight="0" marginwidth="0"</iframe>

Responsive Version

<iframe src="https://mywebsite.com.au" frameborder="0" height="610" style="width:100%;" scrolling="auto" marginheight="0" marginwidth="0"</iframe>

Swapping out the set Width="800" and replacing with style="width:100%;" is a very simple trick that saves you the headache when a user decides they want to 'test' how responsive the site is.

Pop-ups are a common feature of websites today too and in the age of responsive sites they need to 'respond' when a user tries to view your site on an iPhone1. The colorbox plug-in is a simple light-weight pop-up utility that can cover all requirements from basic image galleries to iframed content. You can configure the colorbox when opened to determine what width you would like it to take. Below is a snippet of code that checks what the bounding width of the page is and then uses it to set a maximum width for the colorbox pop-up.

jQuery(function () {
    var innerWidth = $('body').width();
    
    $.colorbox({
	inline: true, //content for the pop-up is contained in a hidden div on current page.
	href: '#myPopupContent', //content on the page to show in pop-up.
	width: (innerWidth < 640 ? 300 : 640), height: 700
    });
});

The width is set to be 640 pixels if the overall width of the page is greater than 640 pixels which should cover all non-phone devices. If it detects the overall width of the view to be less than 640 it will set the pop-up width to 300 pixels to fit on a mobile device. This can be expanded upon for heights and any other properties available in colorbox.

Keeping in mind that users may expand their content to cover 3 monitors or down to the smallest possible you can leverage the above tips to help ensure all content in pop-ups or external iframes can remain relative to the view area. Simple as.