Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+13 votes
1.2k views
in Themes by
recategorized by

So it appears that many pages of my website are not mobile-friendly according to Google Search Console. 

I am using SnowfFat theme. Anyone here facing the same problem? I don't know how to fix this. My Google search ranking also suddenly dropped. Please help.

See the result here https://search.google.com/test/mobile-friendly?id=AK7rrfsnMl4YHFgnnbr1yA 

screenshot:

by
I’d like to step in and fix this issue but I need more information. Could you please click on "Clickable elements too close together" and expand your question with a screenshot of what it showed?
by
moved by
any solution?
by
I have solved it see my answer
by
you have to create a copy of snowflat theme and name it as SnowFlat Mobile

7 Answers

+2 votes
by

You can see the same error on this page, the one you are on right now!:

https://www.question2answer.org/qa/78542/mobile-friendly-errors-in-google-search-console

+3 votes
by
Problem in .qa-sidepanel

If you do it like this. Then everything will work
.qa-sidepanel {display: none;}
Most likely the problem is this:
@media (max-width: 979px) 
.qa-sidepanel { 
width: 280px; 
height: 100%; 
position: fixed; 
right: -280px; 
top: 0; 
overflow-y: auto; 
z-index: 99999; 
background: #fff; 
transition: all 0.15s ease; 
box-shadow: 0 0 0 0 transparent; 
}

Who can do it right? 

by
Please give a solution
by
Give a solution
by
I have the same problem please anyone
+3 votes
by

This workaround removed the issues in my site. It's based on xrpbro's answer.

Edit the file qa-theme/SnowFlat/qa-styles.css and add the lines in bold:

    .qa-sidepanel {
        display: none;
        width: 280px;
        height: 100%;
        position: fixed;
        right: -280px;
        top: 0;
        overflow-y: auto;
        z-index: 99999;
        background: #fff;
        transition: all 0.15s ease;
        box-shadow: 0 0 0 0 transparent;
    }
    .qa-sidepanel.open {
        display: inherit;
        right: 0 !important;
        transition: all 0.15s ease;
        box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
    }

I'm not sure if "display: inherit" is the most correct option, but it works fine in all the scenarios I've tested it. Feel free to suggest a better display option.

This change removes the smooth transition of the side panel, but keeps Google happy. My guess is that having the side panel visible but outside of the screen is what Google detects as mobility errors. You can check out the result here:

https://support.vehiclephysics.com/69/how-can-import-tir-pacejka-file-which-has-pac2002-file-format

That page was showing the errors "Clickable elements too close together" and "Content wider than screen".

0 votes
by
edited by

// remove sidebar for user profile pages

if ($this->template == 'account')

return;

        if ($this->template == 'activity')

        return;

        if ($this->template == 'admin')

        return;

        if ($this->template == 'ask')

        return;

        if ($this->template == 'categories')

        return;

        if ($this->template == 'favorites')

        return;

        if ($this->template == 'feedback')

        return;

        if ($this->template == 'hot')

        return;

        if ($this->template == 'ip')

        return;

        if ($this->template == 'login')

        return;

        if ($this->template == 'message')

        return;

        if ($this->template == 'qa')

        return;

        if ($this->template == 'question')

        return;

        if ($this->template == 'questions')

        return;

        if ($this->template == 'register')

        return;

        if ($this->template == 'search')

        return;

        if ($this->template == 'tag')

        return;

        if ($this->template == 'tags')

        return;

        if ($this->template == 'unanswered')

        return;

        if ($this->template == 'updates')

        return;

        if ($this->template == 'user')

        return;

        if ($this->template == 'users')

        return;

by
in
qa-theme/SnowFlat Mobile/qa-theme.php
–1 vote
by

Go to Layouts, select option "Custom HTML in <head> section of every page:"

Add this code in the text area:

<style type="text/css" id="customcss">
.icon-left-open-big {display: none;}
</style>

Just tested my site using this code and there are no mobile-friendly errors on Google.

This only works for SnowFlat theme (default theme). 

+1 vote
by
It seems that the latest 1.8.4 update fixed SOME of the problems.

This current page has no problems any more:  https://www.question2answer.org/qa/78542/how-to-fix-mobile-friendly-errors-in-snowflat-theme

However this page still has problems: https://www.question2answer.org/qa/83765/how-to-fix-mobile-friendly-error-in-snowflat-theme
0 votes
by

This is true and it was the best option because it appears optimized to me.

let them know, do it.

...