How to fix mobile usability issues for WordPress site
- Mobile Usability report in Google Search Console.
- Text too small to read.
- Clickable elements too close together.
- Content wider than screen.
- Viewport not set [to “device-width”]
- Uses incompatible plugins.
- Validate fix in Search Console. (from google)
see you may use a responsive theme like a bootstrap theme or use the visibility : hidden
visibility - CSS: Cascading Style Sheets | MDN
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a .
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
3. control blocks and images and decide what is going to be shown on each size screen
Changing the visibility of an element in different screen sizes - WordPress Websites For Businesses, Artists, Bloggers Shops And More
How to hide an element in different screen sizes? One of the Elementor’s responsive options is Hiding an element for a certain device size and making it Visible for the others. This is really a striking feature if you want to make your site more responsive. In order to change the visibility of an element in different screen sizes: 1. Add a […]
https://themes.artbees.net/docs/changing-the-visibility-of-an-element-in-different-screen-sizes/
(this was an elementor case)
4. How to see what is shown in every size
How do I use Google DevTools?
From the Chrome menu: Open the Chrome menu and go to “More Tools” > “Developer Tools.” Finally, you can right-click (Windows) or Ctrl-click (Mac) anything on a web page and select “Inspect Element” to open Developer Tools. The Developer Tools panel will open in whatever web page you're on.
Is a big topic and I wrore a lot, sercah articles, Youtube videos and more, a good solution is to use a responsive theme.
