StudioPress Genesis Themes May Not Be Fully Mobile Responsive

The main reason many bloggers switched from Thesis to Genesis is that StudioPress promotes it as mobile responsive. There is some fine print we must have missed somewhere because while most of their themes are considered mobile responsive, they DO NOT resize videos which is critical to having your posts display well on mobile devices.

Some of their “mobile responsive” themes such as the Prose child theme this site uses do not even resize images. There ARE fixes for both of these issues explained below.

How to Test Your Blog for Mobile Responsiveness

Choose a post that has an image and video in it. Plug it into the StudioPress responsive tool. View each device size and look especially at the images and videos.

Example of Images Not Resizing

Here is a screen capture of my How to Get Recommended post in the tool:

Example of Video Not Resizing

This is an example of a couple of the videos from that same post. Note that they do not resize – they simply get cut off on the right. What you want is for your images and videos to be resized so that the entire image or video displays properly on every device. The easiest fix is to add the plugin.

StudioPress Support Response

Prose is NOT mobile responsive in that it does not resize images (fix below) or video (requires the WordPress Canvas Responsive Videos plugin). Here is the answer from StudioPress tech support:

Hi,

Prose is a little behind some of our newer themes.

Please add the following to your style.css file:

.wp-caption {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
}

That should resolve it for you!

For the videos, we do not load our themes with scripts that are required for something like making video responsive since these CAN be added by a plugin, and, since many customers don’t use video, the script loading would add unnecessary code that needs to be loaded to the site.

Best,
Copyblogger Media Support

Our Blogs MUST BE Made Mobile Responsive

This is not optional. Your images and videos must be easily viewed on devices of any size. Use the code highlighted above if your images do not resize and you are using Genesis to fix your images.

UPDATE: StudioPress recommends the FitVids for WordPress plugin to make videos mobile responsive.

Add the WordPress Canvas Responsive Videos plugin so your videos work in smaller devices. I contacted the developer and he said it will work retroactively so that all videos in your site start appearing correctly.

If you do not use Genesis and have these issues you want to make sure you are using a mobile responsive theme that resizes your text and works on mobile devices. Add this video plugin or use one of the images plugins suggested by Mark Hultgren if you need them:

• http://css-tricks.com/hassle-free-responsive-images-for-wordpress/
• https://wordpress.org/plugins/simple-responsive-images/
• http://graphpaperpress.com/plugins/gpp-shortcodes/
• http://wordpress.org/plugins/wp-fluid-images/

No matter what theme you currently use, choose a post that has an image and a video and plug it into the StudioPress responsive tool and make sure your blog looks good at every size. If it doesn’t already, now you know what to do.

If  you want to see fully mobile responsive themes that automatically resize images and videos, look at Themify and Themify Bizco.

Mobile continues to grow and estimates are that 46-90% of all views will be on mobile by 2014. 90% seems excessive, but 46-50% is definitely likely.