Google’s Mobile-Friendly Test assesses whether your website’s design is right for mobile devices.
If you have mobile-friendliness problems, the test will show the following result:
Now, as NitroPack doesn’t change your website’s design, most mobile-friendliness issues aren’t caused by our service.
But you should still check to make sure that’s the case.
Check mobile-friendliness without NitroPack.
Go to Google’s Mobile-Friendly Test and enter your website’s URL with ?nonitro at the end like this:
If the mobile-friendliness issue persists, you have to work on your website’s design/theme to fix it.
In rare cases, the issue will be fixed once you add ?nonitro.
If this happens, NitroPack likely caused a problem with one or more of the elements on a page.
As a result, on mobile devices, the rendered page looks similar to this one:
Here’s how to find the element that’s causing this issue and fix it.
Debug
Open your website in Chrome, right-click and select “Inspect.”
Click on “Toggle device toolbar” and select a mobile device, for example, Moto G4.
Next, disable JavaScript in your browser.
Go to “Customize and control DevTools” (the three small dots next to the “Settings” button) and select “Run command.”
Type in “JavaScript” and select “Disable JavaScript.”
And refresh your page.
Now, when you scroll down, you should see the element that’s causing the issue.
In the example above, that’s a video element overflowing its container. In your case, it might be an image or another item.
Fix the mobile-friendliness problem
Log into your NitroPack account and go to “Settings”.
From there, open the CSS tab and scroll down to the “Custom CSS” feature. Add this Custom CSS:
@media only screen and (max-width: 767px) {
html, body {
overflow-x: hidden;
}
}
Don’t forget to click “Save Settings” and purge your cache from the Dashboard.
After NitroPack optimizes your website, perform the mobile-friendliness check again. If the issue persists, please contact us at [email protected] so we can help you out.