Fix Mobile Usability Issues on Astra

No results found. Try again with different words?

Search must be at least 3 characters.

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. Add the following code snippet to the page.

Preferably right before the element that references our stylesheet.

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

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.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.