If your website is not mobile-friendly, you are likely to see the error ‘content wider than screen’ in the Google Search Console.
Since the Page Experience Update penalizes sites that do not pass the Core Web Vitals test, it is crucial for webmasters to follow all the guidelines suggested by Google to keep their website faster and responsive.
Related: Page Experience Update: Optimization Guide [2020]
You can easily fix the content wider than screen issue after reading this guide. I was able to successfully fix this issue after following some simple steps which I will discuss in this article.
What is the Content Wider Than Screen Error?
The content wider than screen error happens when your pages are not designed for different screen sizes. The content does not fit the screen size and is cut-off from viewing. Here is an example of a website having this error:
Nowadays, users visit a website using a variety of devices such as mobile phones, desktops, tablets, televisions, e-book readers, gaming consoles, etc.
Related: Common Design Mistakes That Ruins SEO
Therefore, it is crucial to make your website responsive so that users can easily browse your site irrespective of the devices they are using.
Steps To Fix The Content Wider Than Screen Error
Follow the steps below to fix the content wider than screen error:
Step 1: Identify The Pages That Are Affected
Login to the search console and click on mobile usability under enhancements menu.
You will see the issue highlighted in red below:
Click on it to see a list of URLs having this issue. Now, click on any one of the URL to further diagnose the problem.
Step 2: Take The Mobile-Friendly Test
Now, paste the URL in the Google mobile-friendly test tool. Wait for a few seconds for the tool to complete the analysis.
Google will highlight the issues your page has along with suggestions to fix the content wider than screen issue.
Related: How To Fix LCP Issue: Longer Than 4s (Desktop) or (Mobile)
If you are finding it difficult to understand the suggestions then don’t panic, I have made it easier for you to follow the suggestions returned by Google. You can follow the action items from step 3 below and this will automatically fix any issue that the Google lighthouse is encountering.
Step 3: Set and Size Content to the Viewport
Most web browsers increase the font sizes to match the desktop screen size. To avoid browsers doing that and to match the screen size automatically to the user’s device, you need to set the viewport.
Related: How To Fix FCP Issue Longer Than 3 Seconds
Add the below meta code in the head section on all your webpages that have this issue:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
This code will instruct browsers to match the width of the page with the width of the screen that the user is using to browse your site. Hence, the users can easily browse your site without any content-width mismatch.
Step 4: Give All Images a Max Width of 100%
Another common issue that might result in a poor browsing experience is image width. Sometimes, the images are larger in width and make the users scroll horizontally.
Now, users are used to scrolling vertically to browse a site and not horizontally. Forcing users to do so results in a bad user experience.
Related: Best WordPress Plugins For Image Optimization
The Core Web Vitals report catches this issue and displays it as content wider than screen error in the mobile usability report.
Related: What Are Core Web Vitals And Why Its Important?
To avoid this from happening, you should add the following code in the stylesheet to make it applicable for all the images in your website.
img {
max-width: 100%;
display: block;
}The above code will instruct the browsers not to stretch the image than its natural size. If any
Step 5: Use Flexbox CSS Layout
Most of the designers still use the floated layout model with two columns for designing websites. The disadvantage of such a model is that it forces the user to browse horizontally and this again is marked as an error in the Google lighthouse report.
Here is an example of a floated layout model:
Using the Flexbox CSS layout model, you can fix a certain percentage of width for the container rather than creating a scrollbar. Here is an example output:
Once you use the Flexible Box Layout module, a flexible responsive page is created which will pass the Core Web Vitals test.
Step 6: Set Media Query Breakpoints
If your page has extensive styling needs that needs advanced options then you should use the CSS media queries.
Take the help of your web developer to set media queries based on viewport size and device capability.
Related: Read the ADA Compliance Checklist For Website Design
Add necessary breakpoints to make your content look good on a small screen.
Here is an example code where two CSS media queries are used – one for the narrow screen and the other for a wider screen:
@media (max-width: 500px) {
}
@media (min-width: 501px) {
}Similarly, you can group media queries together to display your content within the device screen size. Remember, this step is necessary when you are unable to fix the issue using step 3 above.
Step 7: Validate Fix
Once you have made all the changes, upload your revised page to the server and check it again using the Mobile Test tool. If the errors are not shown, then you can visit the Search Console and ask Google to validate the fixes. Simply click on the validate fix button that is displayed in the right corner where the sample error URL is seen (in the mobile usability section).
That’s it! Just wait for Google to validate the issue and the content wider than screen issue will be fixed.
