Make Your WordPress Theme Look Good on Phones

What is a responsive theme?

A responsive theme changes its layout to fit the screen. On a big screen you see columns side by side. On a phone you see them stacked. Even a responsive theme can look odd if a picture, table or setting is too wide.

Step 1: See the problem

1. Open your site on a real phone.
2. Or open it on a computer and press F12 in Chrome.
3. Click the small phone and tablet icon in the tools panel.
4. Pick a phone size from the list.
5. Scroll the page and note what is wrong.

Step 2: Check the viewport tag

The viewport tag tells a phone to fit the page to its width. Without it, phones show a tiny zoomed-out page. Look in your theme's header.php file for this line, between the head tags.

<meta name="viewport" content="width=device-width, initial-scale=1">

If it is missing, add it. Do this in your child theme.

Step 3: Fix wide pictures

1. Click Appearance, then Customize.
2. Click Additional CSS.
3. Paste the rule below.
4. Click Publish.

img {
    max-width: 100%;
    height: auto;
}

CSS is the set of style rules for a page. This rule stops a picture being wider than its box.

Step 4: Fix wide tables and boxes

Paste this rule in the same Additional CSS box.

table {
    display: block;
    overflow-x: auto;
}

This lets a wide table scroll sideways instead of breaking the page.

Step 5: Other checks

• Update your theme and plugins. Click Dashboard, then Updates.
• Turn off plugins one by one. Some add fixed-width boxes.
• Check that your menu has a mobile version in the theme settings.
• Clear your cache plugin and your browser cache.
• Try another theme to see if the theme is the cause.

Quick recap

• Test your site at phone size.
• Make sure the viewport tag is present.
• Use CSS to shrink pictures and scroll tables.
• Update, test plugins and clear caches.