You are now living in Google Mobile First Index ranking World, that means the new Google Search Console Mobile Usability Report should not show any errors when you want to see higher Google rankings.
Although #RankYa how to video tutorials are aimed at simplifying Google, WordPress and digital marketing, this particular tutorial on How to Fix Mobile Usability Errors in Google Search Console could be tricky if you are not familiar with Web Development. In all cases, I still tried to enlighten you as best that I can.
Video Tutorial for How to Fix Mobile Usability Errors in Search Console
Search Console Mobile Usability Errors
Below are errors that can appear in the Mobile Usability report in Google Webmaster Tools (The New Search Console)
Uses incompatible plugins errors
The page includes plugins, such as Flash, that are not supported by most mobile browsers. Google recommends redesigning your page using modern, broadly-supported web technologies, such as HTML5. Read more about web animation guidelines. For most WordPress setups, this won’t show up unless you are using a functionality that uses incompatible plugins.
Viewport not set issues
Your page does not define a viewport property, which tells browsers how to adjust the page’s dimension and scaling to suit the screen size. Because visitors to your site use a variety of devices with varying screen sizes, from large desktop monitors, to tablets and small smartphones, your pages should specify a viewport using the meta viewport tag. Learn more in Responsive Web Design Basics.
Viewport not set to “device-width” error
Your page defines a fixed-width viewport property, which means that it can’t adjust for different screen sizes. To fix this error, adopt a responsive design for your site’s pages, and set the viewport to match the device’s width and scale accordingly. Read how to correctly Set the Viewport.
Or you could just add this to head portion (located at public_html > wp-content > themes > yourThemeName > header.php (find <head> and place it just after it and save))
<meta name="viewport" content="width=device-width, initial-scale=1">
Content wider than screen errors
This report indicates pages where horizontal scrolling is necessary to see words and images on the page. This happens when pages use absolute values in CSS declarations, or use images designed to look best at a specific browser width (such as 980px). To fix this error, make sure the pages use relative width and position values for CSS elements, and make sure images can scale as well. Read more in Size Content to Viewport.
CSS usually fixes this error img{width:100%;height:auto} or you may need to use display:block for the containing element (usually <div>s)
Text too small to read errors
This report identifies pages where the font size for the page is too small to be legible and would require mobile visitors to “pinch to zoom” in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. Read more about font size best practices in Use Legible Font Sizes. Depending on your level of knowledge of CSS, you could try your hands in responsive font sizes, if not, at least stay safe with font-size:16px
Clickable elements too close together errors
This report shows the URLs for sites where touch elements, such as buttons and navigational links, are so close to each other. That means a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to correctly size and space buttons and navigational links to be suitable for your mobile visitors. To fix such issues, CSS can be used where you can use paddings and margins for the elements Search Console Mobile Usability report is complaining about. Example only:
a {padding:1rem};
Learn more here Tap targets are not sized appropriately
Best Way to Fix All Search Console Errors
If you are using popular Content Management Systems, you can also consider changing your website theme so that its mobile responsive.
If you are not technical and all this code samples are confusing, then, you may need to hire a web developer who can make adjustments to mobile usability of your website. RankYa is also a fully qualified Web Developer.
If your website is built on WordPress, and you want fully responsive mobile ready WordPress Theme, check out the latest WordPress Twenty Twenty One Theme
So you mean Text Too Small to Read errors are ALL & ANY text size
Why does Google not show where the errors occur on the site? Instead of confusing search console help
Edited by admin: I am an SEO spammer looking for quick and easy backlinks because they help rank higher in Google, hence I probably used a WordPress comment spam software to blast the internet looking for backlinks.
That’s because you read some information online about backlinks and Google rankings. But they are false and incorrect, in fact, spamming WordPress comments for backlinks actually is penalizing your website’s rankings. Unless you stop and remove those comment spam, your website will never get anywhere online
Hello RankYa!
Please I have a Blogger blog and am having issues with it now because it is not mobile friendly and it is having mobile usability issues such as;
1. Text too small to read.
2. Viewport not set
3. Content wider than the screen
4. Etc.
These has my worry for a while now because i have watched a lot of tutorial on YouTube including your own video tutorials and am not still yet to fix it.
Please I need your help because I don’t want to lose the blog. Please kindly give me guidelines on how to fix it please and please. I humbly appreciate your sincere reply. Thank you so much.
This is not good because its blogger site. You should 100% consider moving to WordPress (I can assist with this, including hosting). To fix issues with Blogger, you will need to do bit more reading about editing Theme (I haven’t used blogger for a long time now but I know you can edit it).
Add this to
this will fix mobile usability error viewport not set
Text too small?
add this CSS rules
.byline,
.byline.post-author a,
.byline.post-timestamp a{
font-size:1rem;
}
.feed-view .post-wrapper .byline, .feed-view .post-wrapper .comment-link {
margin-right: 1rem !important;
}
I am certain Google Search Console is complaining about these
Content wider than screen?
add this CSS rule
.item-view .bg-photo{
display:none
}
will remove the blurred image (serves no purpose anyway). Remember this is a quick fix. If this doesn’t fix the content wider than screen issue. You will also need to remove body{background-image:
Do these and I am certain the Mobile Usability Problems as you mentioned will be gone. This is important to fix because Google rankings are affected.
I would like to know if you can help me repairing the issues that I have in search console. I left you, my email in the information box. Thank you so much.
Best Regards,
Alejandro
Hello Alejandro, I haven’t received your email for fixing mobile usability errors. Simply send more details using RankYa contact page https://www.rankya.com/contact/
Hi, thank you for the great tutorial. Can you answer the following questions:
1. You seem to type ” #site-navigation ul li” in a random place in style.css file. Is that so always or there are exceptions?
2. My style.css file looks like this and the last line bothers me :
————————————————————-
/*
Theme Name: CoralDark – child
Version: 1.0
Description: A child theme of Coral Dark
Template: coral-dark
*/
@import url(“../coral-dark/style.css”);
—————————————————————-
What does “@import url(“../coral-dark/style.css”); ” means? Can I still make changes to padding values here?
3. Is there a way to fix unresponsive theme in WP by using tricks like making sure text lines are no longer than 10 words in English or by editing the code of embedded images/videos?
4. In your video about fixing “clickable elements too close” you say that 1rem is relative to body font size. I checked my site and the body font size value is 14 pixels, however with padding of say 2 rem the padding new value goes to 32 pixels instead of 28 pixels (2x14px=28px). Is there anything I am missing?
5. In Chrome dev tools console when “Elements” tab is active just under the window of the page code there is a bar (line) with bits of info like tags, hashtags etc. looking like the phrase/notation ” #site-navigation ul li” you used. Is there any connection between the info in this bar and how the notation will look?
6. The notation ” #site-navigation ul li”, how it could change in different scenarios. Are there popular notations/examples you can share or learning resource/link?
7. Can you make a video or explain in the comments here how to size and space out buttons which are part of a widget. For e.g. i have a widget containing social media icons for sharing to several channels and since all attempts to space more the nav menu elements trough the style.css file did not make any change I suspect that these icons are too close together for the mobile user to click on without clicking a neighbor element.
Hello Elmar, let me try to answer your questions about fixing Search Console Mobile Usability issues for WordPress Theme you are using.
1: Is that so always or there are exceptions? There are always exceptions, but the rule of thumb is always modify the already existing CSS .class (or #id) values.
2: seems like your child theme is importing ../coral-dark/style.css which is the parent theme CSS (this is usually normal) so its easier for you to make adjustments. That means, any new CSS rules you want to add, you would do so AFTER the line @import url(“../coral-dark/style.css”);
HERE and browser will render your new rules.
3: sure, you can fix mobile usability issues (as in make everything responsive). RankYa has a video on making YouTube videos responsive. With images, this could be tricky but you can try to methods in the video.
4: you could remedy this (in fact, I would surely use this as it makes things easy).
body{font-size:16px;} just add that to your child theme style.css and now you know 1rem is 16px
5: that is always tricky part of CSS (because of specificity) that means, I would first test: e.g. #site-navigation ul li (something here) to see if the declaration and value wins. If so, all is good continue, if not, then, I would try article #site-navigation ul li {to see if this wins} I found this approach better (knowing #id’s always have higher value in CSS.
6: perhaps Google would help, but then again I learnt a great deal from Google search and https://css-tricks.com/forums/ over the years (CSS is complex, but main things to note are #id’s have higher value then .class.
Another example for you for fixing mobile responsiveness of HTML.
#site-navigation ul li{color:green}
nav #site-navigation ul li{color:red} THIS WILL WIN
header nav #site-navigation ul li{color:blue} THIS WILL WIN
nav #site-navigation ul li{color:orange !important} THIS WILL WIN because you are adding !important
The more specific your declaration, the higher CSS value that will be calculated by browsers. Having said that, as you learn more and more, your job then is to use LESS CSS Declaration
7: this is a challenge (because of the way widgets work from external sources). There are many ways you can tackle this. The easiest way is to find exactly which CSS rule is making the widget work, then, create a new rule that is more specific. E.G .widget a {padding:.5rem} (just find what is above in terms of CSS) e.g. aside .widget a{padding:1rem} etc.
This is easiest way, if this does not work (and IF the widget is loaded dynamically, then, I am afraid, more advanced techniques are needed. Perhaps Jquery https://stackoverflow.com/questions/3452778/jquery-change-class-name
What do you think? Will above insights assist with How to Fix Mobile Usability Errors shown in Google search console?
Thank you for your long explanatory answer for each question and the useful links you provided . Few bloggers would do this when having actual business to work on a side. Appreciated highly!!! I hope this Q&A session is helpful for new readers of the article as well.
At the time of sending this questions I had already seen only the video on your YouTube channel from few years ago about fixing mobile usability issues and my questions were related to the old video. By accident I saw at the end of the article the new video and would suggest that you place it immediately after the title so others won`t miss it after following the links to help sections from Google you provided , as I did initially. Thanks to the new video at the end of this article I better understand the theory and practice of fixing them but success rate is still zero with my site due to one of the following :
1.Small things missed during watching that are not exactly stated. Sometimes just for split second as you talk to yourself (in order to recall what you did to fix your issue) you kind of browse trough the code in the Elements tab/window in search for the right place where style changes need to be made. ..What is the exact criteria by which you decide to select this specific line of code? After reading the video should be “find what is above in terms of CSS” as you stated in your answers I guess?
2. Plugins I have installed like a free mobile plugin making a mobile version of my site or the social media widget. Can you recommend another free plugin to create a mobile version of a site without problems with Dev console tests afterwards or free plugin for social media icons?
3. Not enough understanding of how to use even better Developer console as a marketeer who never did a complete course on JavaScript and always looks for shortcuts since there are so many other things a marketeer is involved in or has to learn. Maybe you can make a tutorial on basics of JavaScript and developer console for marketers without solid/any JavaScript knowledge.
4. All your explanations work on the mobile screen simulator (paddings/margins changes are visible) on the left side of dev console but when “Publish” button is hit in WordPress dashboard (after the style.css edit or when using the code editor of “Customize” dashboard link) none of the changes (paddings/margins) actually appears live on the site when seen on a mobile device. What could be the reason? My WordPress theme, plugins…
5. I have noticed that when “Toggle device toolbar” icon from developer console menu bar is clicked and the mobile version of my website appears I am not able to inspect elements from the Menu (the icon with the 3 parallel lines) . For e.g. i click on the Menu, it opens the drop-down options and I want to select “Contact” page (one of the nav menu elements) it always contracts so I can never select it. So I can only inspect nav menu elements if I switch back to full desktop preview but then I am not sure how this affects the styles declarations compared when a nav menu elements from the mobile version of the site is inspected.
Is it possible the free version of the mobile plugin I use to cause issues when testing things in developer console?
How to avoid this contracting menu so I can inspect the nav menu elements of the mobile site?
6. About “Page loading issues” you said not worry when issue is on URL that does not belong to my site. I have the following issues and URLs are from my site but not pages created by me but plugin related folders/files/functions:
– What should I do with “plugin script” blocked by robots.txt? Allow them for craw and index or else?
– What should I do with plugin stylesheet blocked by robots.txt?Allow them for craw and index or else?
– What should I do with “jquery script” blocked by robots.txt?Allow them for craw and index or else?
As a side note I would mention that I use a popular plugin creating automatic robots.txt file (you have made videos using the same plugin)
What should I do with “plugin script” blocked by robots.txt? Allow them for craw and index or else? If on your site, ALLOW
– What should I do with plugin stylesheet blocked by robots.txt? Allow them for craw and index or else? If on your site, ALLOW
– What should I do with “jquery script” blocked by robots.txt? Allow them for craw and index or else? If on your site, ALLOW
if not on your website, then, you only have 2 options, either remove the functionality from your site (FB plugin etc.) or ignore the message.