Mobile Usability (Google)

Google just sent me an email saying: Clickable elements too close together. My website is: catalystministriesinc.com

How do I resolve this issue?

Hello Calvin,

Thanks for writing in! Did Google mentioned which elements? It’s difficult for us to do anything if we don’t know exactly what elements they refer to. In general, you can ignore messages like that if you don’t actually think there are any usability problems on your site yourself. I have look around and I found several cases like this even with other top premium themes. I would suggest that you check out this link and read on the responses from Google Masters.

Hope this helps.

Yes, they sent this email:

Search Console has identified that your site is affected by 2 new issues of type Mobile Usability.

Top Issues (5 maximum)

The following issues were found on your site:

Clickable elements too close together
Content wider than screen
We recommend that you learn more about these issues and fix them when possible to enable your site to have the best possible experience and coverage in Google Search.

The main menu is going out of an iPhone screen area. I tried to play around with the header(s). But, it did not work. Is there a way to create the menu or assign a mobile menu that won’t go outside the visible area? Maybe put the main menu on the middle, and let it dropdown without having submenus. (?)

1 Like

Hey Calvin,

Thanks for providing more details.

I checked your site and you’re using a Navigation Dropdown element. That element is not good if you have submenu because it would overflow. That is the most probable reason why Google Mobile-Friendly Test detected a “Content wider than screen”.

Please use a Navigation Collapsed or a Navigation Layered instead so your sub-menus will display within the canvas. The one thing you’d just need to take into account with the said elements is the canvas width. You can try a small size like 360px or percentage based like 20%.

Regarding “Clickable elements too close together”, it’s probably because of your logo being close to the dropdown toggle button. Try setting the left margin of your logo container to 0 and instead set the right margin.

If you still fail the test with the suggested changes, you will need to inspect other elements in the page. I’d recommend you setup a test page and remove elements one by one to see what element is causing the issue. You can start experimenting from there.

Hope that gives you an idea fixing the Mobile-Friendly Test.

Thank you for the response.

Where do I find this? How do I do this?

I’m sorry I have assumed you already know about the elements since you already have worked with the header builder. All setup instructions can be found in our Knowledge Base.

The documentation or usage instructions for the Navigation Collapsed can be found under the Elements section. The setup is the same for the Navigation Layered. They just behave differently.

I’ll post the Navigation Collapsed link here today but next time, please look up and learn from our Knowledge Base first.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.