You may be have seen an Error “Content wider than screen” error while moving on to the Improvements panel in Google Search Console.
We Fix Mobile Usability Errors!
Our team of experts will fix Mobile usability problems that may show in GSC for you so you don't have to waste your time..
“Content wider than screen” is a mobile usability error. When it comes to mobile usability, you should not ignore it at all. Since Core Web Vitals is Google’s ranking factor, every website should be responsive for mobile and desktop devices.
Mobile Usability is a fundamental report since, although it goes without saying at the risk of seeming repetitive, browsing through mobile devices is increasing and Google has already moved by launching its Mobile-First Index.
So how you can fix the error “Content wider than screen”?.
What is “Content Wider than Screen” Error
Have you ever found yourself browsing on your mobile device and entered a website where you had to scroll horizontally to view all the content? Well, that’s what this error message tells us.
Usually, The content wider than screen error appears when your pages are not designed for mobile devices or different screen sizes.
To fix this, it’s best to use relative width and position values. However, we will discuss below how to fix the error “Content wider than the screen“.
How to fix The Content Wider than Screen Error
Step 1: Identify the Affected Pages
To fix the error “Content wider than screen”, first you have to identify that affected page.
To do this, head over to your Google Search Console > Experience> Mobile Usability.
Now, You will see the issue highlighted like this:
Now click on the error to see the affected page by the error.
Step 2: Run Mobile-Friendly Test
After clicking on the error, it will show you the list of pages that are affected by the “Content wider than screen” error. Now copy a link and run the mobile-friendly test. To see “Content wider than screen” error is really happening on your page.
It will take a few minutes and will highlight mobile usability issues along with suggestions to fix the “content wider than screen” issue.
Now how to fix the error “Content wider than screen”.
Step 3: Size Content to the Viewport
Web browsers always want to give a perfect user experience to their users. That’s why some web browsers increase the font sizes to compete with the desktop page. Instead of doing this, they need to increase font sizes according to screen size automatically.
So that, users can easily browse your website without any problem.
However, we can do it on our website to match the screen size automatically. You just need to set the Viewport.
To do this, add the below meta code in the head section on all your web pages affected by the “Content wider than screen” error:
<meta name=” viewport” content=”width=device-width, initial-scale=1.0″>Let’s move to the next trick to fix the error “content wider than screen”.
Step 4: Set Max Width of 100% for Images
Images can also cause a poor user experience. Imagine if images are larger in width, it makes the users scroll horizontally.
That’s why all images on your website should have a width of 100%.
To do this, add the below-given code in the stylesheet of your website:
img {
max-width: 100%;
display: block;
}Step 5: Set Media Query Breakpoints
If the above-given tricks do not work, you have to try this trick to fix the error “Content wider than screen”.
To do this, add below given CSS code to your additional CSS section:
@media (max-width: 500px) {
}
@media (min-width: 501px) {
}Step 6: Validate Fix
That’s all. Now just run validation by Clicking on Validate Fix. It will some days to review your customizations.
After doing customizations, run a mobile-friendly test to check if the error “Content wider than screen” is still there or fixed.
If you pass the test, Google will mark your affected page URL as Validation Passed.
If you are looking for a service that can fix your mobile usability errors then our Mobile Usability Service can help you to fix your all problems quickly.
Watch the given video to learn how to fix the “Content Wider Than Screen” error:
You may see more errors on your Google Search Console. Most of the errors are related to Core Web Vitals that badly affect your blog or website.I recommend you Core Web Vitals & PageSpeed Booster plugin, it helps you tackle Core Web Vitals and website speed.
I hope this article helps you to fix the error “Content wider than screen”. If you are stuck anywhere, just leave a comment below, we will get back to you.
