Fix Mobile Usability Issues on Astra

Usually, Google Search Console reports one or all of the following issues:

• Clickable elements too close together
• Text too small to read
• Content wider than screen

What’s causing the issue?

The origin of the issue is two-fold:

1. Sometimes Googlebot is in a hurry and will not fetch all page resources when it loads your page for indexing.
2. One or several HTML elements on the page are wider than the mobile viewport but only so when your CSS fails to load.

Things go out of the box when Googlebot skips your CSS file on a page where some content forces the viewport to scale or scroll if it doesn’t receive a CSS style.

How to fix the issue?

Using a small set of CSS styles will fix this issue. You can add the custom code using either customizer settings or directly accessing the Astra child theme’s style.css file.

    :where(body, iframe, pre, img, svg, video, canvas, select) {
        max-width: 100%;
        overflow: auto;
        word-break: break-word;
    }

Using style.css:

You have to add the code to the Astra child theme’s style.css file, Preferably right before the element that references our stylesheet.

Have a glance at the below-attached screenshot for a better understanding.

Using Customizer Settings:

From the WordPress dashboard, navigate to Appearance > Customize > Additional CSS and place the code.

This snippet ensures that when Googlebot ignores your page resources, it at least applies these styles to the elements in the : where() selector list.

• max-width: 100% prevents the elements from being wider than the viewport.
• overflow: auto makes sure that content inside an element won’t push an element over its width limit.
• word-break: break-word ensures long words are wrapped to the next line when they extend beyond the viewport width.