Search Console / Theme issues on Mobile

Support
#1

Hello!

Since the last month, I started receiving notifications from Google Search Console about issues on the mobile version of my website. The three problems I’m facing are: 1. Clickable elements are too close together, 2. The text is too small to read, and 3. The content is wider than the screen. [See attached screenshot]

I have tried to inspect the issue but cannot figure out where exactly the errors are being found. I’m hoping that if it’s on the sidebar, or footer/ header, etc, and that if I fix the issue in one place, all 74 pages with errors will be resolved.

I was told by a friend that the issue is in the theme so I thought I’d ask here first if you could please help me figure out the source of the problem? Any advice would help me a lot!

My website is https://crisisequipped.com

Thanks so much!!

#2

Hey Nadia,

The clickable elements that are close together might be the slider navigation. The Content Too Wide error is also usually triggered by sliders though it’s just a false positive and/or Google can’t read the CSS and JS files in your site. You’d need to hire a SEO expert to make Google read the CSS and JS files.

Uploading…

For the small text, your top bar text and the text below your form are very small. We don’t have control over your form text and our theme does not control it. You’re using the font tag which is not recommended. Please remove it or have a developer remove it.

For the Topbar text, it comes from our theme. Please add this code in Theme Options > CSS to increase the text size.

.x-topbar .p-info {
    font-size: 14px;
}

Increase 14px if Google still doesn’t like it.

Thanks.

#3

Thanks for your reply!!

I have a couple questions. For the clickable elements that are too close together and the content too wide errors- if 74 of my pages are getting those errors, could it be something other than the slider? I’m only using the Revolution Slider on the homepage.

As for the font tag, I had no idea I was using one. I’m happy to remove it but could you show me what is the code that I need to remove?

I added the Topbar text code.

Thanks for all your help!

#4

Hi Nadia,

Your site max-width (1200px ) and width (88%) is the default settings and a lot of sites have that width, so more likely that is not the issue.

Content wider than screen, this report indicates pages where horizontal scrolling is necessary to see words and images on the page, but I don’t see any elements on your page that have this issue. Even the logo is fine, none of the elements is overflowing.

Clickable elements too close together, this report shows the URLs for sites where touch elements, such as buttons and navigational links, are so close to each other. The only elements that I am seeing with this possible issue are the Logo and mobile menu. You can increase the gap between these two elements by increasing the MOBILE NAVBAR BUTTON ALIGNMENT under Theme Options > Header

The text is too small to read are self-explanatory, I can see tiny text underneath your email forms.

More details about Mobile-usability errors.

However, please keep in mind that these warnings are what the Googlebot sees, not the page appearance that we actually see, so we can not really tell what element is the Googlebot is pointing out.

I have checked your site in Google Mobile-Friendly test and it gets the Greenlight.


The Page Loading Issues that you see has something to do with Googlebot being blocked by robots.txt


Also, please clear all your caching plugins/feature (WP ROCKET).

Thanks,

#5

Thank you SO much for all your insight. I really appreciate your time and help!

One quick observation I made while looking at my site on mobile, was that there’s one place where the Captcha is going off-screen in the contact form. Is there any CSS we could use here to add margins to the contact form so that the box doesn’t go off-screen? Here’s a picture to show you what I mean:

I’m hoping that could solve the Content Wider Than Screen issue.

I did what you suggested for the Mobile Nav. Bar adjustment. I increased it to 24 px. I hope that works too!
How do I increase the space between the buttons in the footer? Those seem to be close to each other on mobile.

I also increased the small font from my contact forms so I’m hoping that fixes the Text Too Small to Read issues.

Last question- does it make a difference if my blog margins are -2.5? Or is there a specified margin that is mobile friendly? With the margins at -2.5em, none of my text goes off the screen on desktop or mobile. (I’m mainly asking because of the content being wider than the screen issue). Here’s a picture for reference:

Thanks again sooo much for all your help!! :slight_smile:

#6

Hey Nadia,

The captcha is not a part of our theme. Please contact the captcha plugin developer if there’s an option to shorten it or s/he could provide you with custom code.

-----------------------------------------------------------------------------------

For the Social Icons, here’s the override code both for the Topbar, Footer, and Social Sharing Icons. You can adjust the margin values.

.x-topbar .x-social-global a {
    margin-left: 15px;
}
.x-colophon.bottom .x-social-global a {
    margin: 0 2.25%;
}
.x-entry-share .x-share {
    margin: 0 .65em;
}

-----------------------------------------------------------------------------------

The negative margins could be the cause for the Content Wider Than Screen error as that could push contents outside of its container and it’s hard to see them. Please set them to 0. There’s no such thing as a mobile-friendly margin. What you need to understand is how the margin property works so you can advantage of it without causing issues.

Once you set the margin to 0, by the way, disable the Row’s Inner Container as I see you’re trying to expand your content to the full space of the content area. Inspect the Row inside the Section.

Hope that helps.

#7

Hi!!
.
Ok, I’ll try to get custom code for the captcha.

I applied the code you gave me for the Social Icons. That worked great!
I’m wondering if there’s a code to increase the space between the buttons on the footer. I’ll show you what I mean:

On mobile they look more like this:

Maybe we can separate them a little from side to side but also from top to bottom. I hope that made sense. :slight_smile:

I just figured out how to turn off the inner container in the row. Thank you for that, it looks much better!

Thanks again for everything! :slight_smile:

#8

Hi Nadia,

You can add this to Theme Options > CSS

.x-colophon.bottom .x-nav li {
	margin-left: 1.5em;
    margin-right: 1.5em;
    line-height: 2;
}

Feel free to adjust those values, the line-height: 2; is the vertically spacing of the text.

Remember to clear all your caching plugins/feature (WP ROCKET).

Hope it helps,
Cheers!

#9

Thank you for all your help! :slight_smile:

#10

You’re most welcome, Nadia.

#11

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