Google warning re not mobile friendly

I got a warning from Google that the rankings of the site could be affected as it is not mobile friendly.

Using BuddyPress BusinessVersion: 4.2.8

The specific errors were:
Touch elements too close
Viewport not configured
Small font size

Are these theme related and if so, how can we fix them?

  • Adam Czajczyk

    Hello Craig!

    I hope you're well today and thank you for your question!

    I suppose you're refering to the http://www.croydonfoot.com page? I took the liberty to run your site through the Google PageSpeed Insights so I can see what you're talking about.

    Those issues are indeed theme related and should be pretty easy to fix, however you'll need to play a little with html/css. The best way would be to create a child theme. If you need some help on creating child themes here's an article that should give you a good starting point: https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/ and here's some more from official WordPress Codex: http://codex.wordpress.org/Child_Themes

    That being said let's address the issues. I'd start with the "Viewport not configured". To fix it you need to add the following line to the header.php file between <head> and </head> tags (preferably somwhere at the top):

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

    This line asks mobile devices to treat your website as a moble site which results in proper scaling of its elements. Otherwise mobile browsers render the site as it would be a "full-scale" website, just like on desktops.

    Now I'd run the site through PageInsights again just to see what happens. There's a good chance that this change alone will fix other issues. If Google still says "Touch elements too close" please see below.

    This issue refers menu items. On mobile devices they are expected to be touched with a finger whis is usually much less precise than mouse pointer :slight_smile: That being said, it's a good practise to make them a bit bigger and to leave some space between. Google says that every "tap-point" (or a "button") should be of at least 7mm size (both horizontally and vertically) and the space between them should be set to at least 5mm. It equals - accordingly - 48 and 32 pixels).

    To fix it set in your CSS (preferably in your Child theme) this rule:

    .sf-menu a {
    padding:32px;
    width:48px;
    height:48px;
    }

    Of course you might want to set width bigger than this in order to keep menu items horizontal.

    Hope that helped.
    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.