Shop Categories

X

Mobile usability issues detected by Search Console

Home Forums Agama Pro Mobile usability issues detected by Search Console

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25833
    Cristina Alciati
    Participant

    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

    #25835
    Zex
    Moderator

    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

    #25837
    Cristina Alciati
    Participant

    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!!

    #25839
    Zex
    Moderator

    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

    #25841
    Cristina Alciati
    Participant

    Fixed!! Thank you 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.