Problems With Google’s Mobile-Friendly Test

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:

Issue2.png

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:

Test_Nonitro.png

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.

NoNitro_Fix.png

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:

Issue.png

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.

DevTools_Devices.png

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.”

Run_Command1_New.png

Type in “JavaScript” and select “Disable JavaScript.”

DisableJS.png

And refresh your page.

Now, when you scroll down, you should see the element that’s causing the issue.

Gif.gif

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, scroll down to the “Custom CSS” feature and add this Custom CSS:

@media only screen and (max-width: 767px) {

html, body {

overflow-x: hidden;

}

}

Custom_CSS_Mobile.png

Don’t forget to click “Save Settings” and to purge your cache from the Dashboard.

Purge_Cache_New.png

After NitroPack optimizes your website, perform the mobile-friendliness check again. If the issue persists, please contact us at support@nitropack.io so we can help you out.

 

Was this article helpful?
3 out of 5 found this helpful

Comments

0 comments

Please sign in to leave a comment.