How To Make Your Genesis Child Theme Work Properly on the iPhone

by | Mar 18, 2018


The WordPress Theme Problem

You have created a mobile responsive a child theme for your WordPress Genesis website and it is working properly on Internet Explorer and Firefox.

But when you load it on iPhone or other mobile phones, it is not resizing properly (i.e. not being responsive).

The Development Root Cause

You have forgotten to include the Viewport meta tag for mobile browsers.

Web Design Solution

You need to add the Viewport meta tag code (below) to your theme functions.php file.

/** Add Viewport meta tag for mobile browsers */
add_action( ‘genesis_meta’, ‘theme_viewport_meta_tag’ );
function theme_viewport_meta_tag() {
echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>’;

That is it. If you save the functions file and try reloading it now, it should all work.

Subscribe to Keep Up With Our
Guides & Insights!