Fix mobile usabilty issues

Hi Lisa, there is no magic fix. 🙂

If you want to continue using Pilcrow, you’ll need to look at each of the issues flagged by Google and address them.

Alternatively, you could install a separate mobile theme that would only be viewed by users on small devices. There is a mobile theme as part of Jetpack, and other options available in the plugins directory.

I guess there is no update for Pilcrow that addresses this problem?

I’m afraid not. Pilcrow is an older theme – you might want to look for a newer theme that’s more mobile-friendly, or you could activate a separate mobile theme as I mentioned above, that’s probably the easiest route.

Can you suggest a way I can fix these easily?

No easy solution, unfortunately. You’d need to experiment with custom CSS for each of the problematic elements – and for the viewport, create a child theme – and test using Google’s tool to verify that the changes meet their requirements.

I activated the Jetpack mobility feature and afterward tested my site http://www.lisakaborycha.com on Google’s tool and it was given the thumbs up.

Great!

I continue to reformat all the pages to increase font size, which is laborious, but it seems like this will do the trick.

If you activated Jetpack’s mobile theme, that’s what mobile devices will see, so I’m not sure why you’re reformatting the font size within posts on desktop devices – that’s no longer necessary once you’ve activated a separate mobile theme.

Did you find the font too small to see on desktop/laptop? Even if you do, there’s no need to change the font size in the post editor on each page one by one, nor to change all the content to h2 tags instead of paragraphs. Adding a bit of custom CSS will take care of the font size everywhere – that’s what CSS is all about!

For example, this would increase the font size of all post and page content:

.entry-content {
    font-size: 150%;
}

Can you suggest what code I should enter, one that will be a good size for viewing also on tablets and other devices?

You can experiment with the code I gave you above and test it on different devices, adjusting as you like until you get a size you’re happy with.

.entry-content {
  font-size: 150%;
}

You many decide to set a couple of sizes for different screen widths, using media queries to target certain screen sizes:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

My main concern has been that when there is an automatic update that the changes will disappear or become in some way distorted. Is this going to be a problem?

Be sure not to edit the theme files directly so you won’t lose your tweaks every time the theme is updated.

It looks like you’re already using a custom CSS plugin, so continue adding your custom CSS there so your changes won’t be overwritten.

And finally, if I try to change the colors of the background on my site will I rest messing everything up? I’ve been thinking for a while about changing the white lettering on the dark background. Is there a CSS code for this too?

Could you please start a new thread for this question and explain what colour you want to change the background to, and what colour you want the text to be? This thread is very old and already marked as resolved, and it’s better to start fresh with a new question so you’ll get quicker help from the community. Thanks!