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!

About the Author - 3am Ideas

3am Ideas is digital marketing agency focussing on providing data-driven services that get measurable and trackable results.

Based in Perth, Western Australia, we've been looking after small and medium-sized businesses since 2014, having worked with clients all over the country.

Our aim is to adopt the role of Virtual Marketing Officer for you, becoming part of your team, sharing in the successes, the blood, sweat and tears.

We're here for you. Let's get the job done!