Mobile usability issues detected by Search Console

[Cristina Alciati]

Good morning,

Search console says I have the following mobile usability issues:

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

To be fair, on mobile, the theme doesn’t look as snazzy as it does on a laptop… please can you help me tweak the css so that the website looks awesome on mobile AND we can keep Google happy at the same time?

Many thanks in advance and stay safe!

Cristina

[Zex]

Hello, Cristina!

I have visited your website and to be fair it looks very good in my opinion 🙂

1. I didn’t find the content that’s wider than the screen.
2. Also, the space between the clickable elements looks fine.
3. The Font-size on the mobile screens is perfectly readable. (e.g. the font-size of the paragraph is the same on every screen sizes (15px) )

If you want to change the font-size of the Headings, you can do it from the Customizing->General->Headings menu

https://prnt.sc/rjlbod

Also, you can change the font-size of the paragraph text from the Customizing->Body menu.
https://prnt.sc/rjld83

Now… if there is something that YOU (not Google) want to change, please let me know.

Regards

[Cristina Alciati]

I think Google doesn’t like the way the breadcrumbs overlap each other with the blog posts. I hid the titles so all you see is the breadcrumbs.

If you click on any of the blogs on your phone you’ll see what I mean. Or is there any way that I can send you a screenshot?

I think if I changed the height of the blue background on mobile to allow enough space for the long titles and the smaller breadcrumbs to co-exist without overlapping it will fix it.

But you are right, I had a look at it again on my mobile and it’s lovely. You and your team have done a great job with this theme.

When I looked it the other day it was all over the place. Might have been an issue with Chrome or with the phone. Who knows?! 🙂

Thank you!!

[Zex]

Hi, Cristina!

You are right, that can be the problem.

I think the better solution for the breadcrumb is to set the Font of the breadcrumb title smaller.

If you increase the breadcrumb height, Breadcrumb will cover the screen more.

Here is the code you can try to set the font smaller on the screens smaller than 992px: (Insert it into Customizing->General->Additional CSS:)

@media only screen and (max-width: 992px) {
.vision-page-title-bar h1 {  
    font-size:4vw!important;
    margin-bottom: 15px!important;
}
}

Anyway, if you want to try to change the breadcrumb bar height, insert the following codes instead of the previous code:

@media only screen and (max-width: 992px) {
   .vision-page-title-bar {
    height: 120px!important;
    }    
   .vision-page-title-captions {
        padding-bottom: 40px!important;
    }
}

Regards

[Cristina Alciati]

Fixed!! Thank you 🙂

[Author]

Posts