Mobile Usability Error

[daintyg]

Google sent me an email stating that II have these 2 errors

Content wider than screen
Clickable elements too close together

[Prasant]

Hello Shamalee,

Thanks for asking.

Please take a look at following threads for some solutions on the message you have received from Google regarding mobile usability.

Google Mobile Usability > Content wider than screen

https://productforums.google.com/forum/#!msg/webmasters/4qabbOgd-UY/wfv0zpWfCgAJ

Let us know how it goes.

Thanks.

[daintyg]

It just let me more confused as to how to fix the issues

https://search.google.com/test/mobile-friendly?view=fetch-info&id=tMlVr-f_yVQN_s01MOCSHQ

[christian]

Hey Shamalee,

Sorry for the confusion. The Mobile Friendly test errors does not necessarily mean the issue is coming from the theme. Google does not give details about what’s causing the errors.

The Content wider than screen error is unlikely an issue with X since it is responsive and out of the box, there is no content that could overflow outside the content. This error is possibly coming from the HelloBar plugin in your site.

The Clickable elements too close together, might be coming from the clickable areas in the header particularly the logo and the mobile nav button and possibly the HelloBar button.

To validate and to test if X is causing the issues, please deactivate all third party plugins then do a validation in Google Mobile Friendly Test. Please contact Google support in case you have questions on how to do this. You then need to check if the errors still persists.

For your header, I’d recommend that you use a Stacked Header Layout. That is because both your logo and navigation is long. In tablet view, it looks like the screenshot below.

That might also be the one causing the close clickable elements error. In X > Theme Options > Header > Logo and Navigation, change the layout to Stacked then you can adjust the logo spacing options to give space between the logo and the mobile nav button.

Hope that helps.

[daintyg]

After disabling all plugins

I followed all your instructions and then check again and the issues is still there. It seems to be issue with the theme.

I want my desktop version of the website (header) to look that way with the logo but how can I customize for ipads and mobile?

I want my navbar to be static top so if I need to change the size of the logo I will. I just don’t know whats the correct size

[rad]

Hi Shamalee,

Let’s discuss the initial issue first, then please start another thread about the header for ipad and mobile.

Those error appears because your site blocks bot that crawls your site. It’s not theme related, but there could be in your site’s robots.txt that blocks the Googlebot smartphone.

And since the scripts and CSS are blocked, it’s not going to render correctly one google view it. Please check this

https://support.google.com/webmasters/answer/6352293#blocked-resources

The resource is blocked to Googlebot by a robots.txt file. If the resource is important (see below), if it is on your own site, you might want to unblock the resource to Googlebot; if it is on another site, you might want to contact the site’s webmaster and ask to have it unblocked.

Please make sure your site’s doesn’t block google bot.

Thanks!