Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+15 votes
3.8k 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

8 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
+6 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".

by
it's still showing both errors on "check mobile-friendly" site
by
It wasn't showing the errors 2.5 years ago, when this answer was posted. Since then, Google kept raising the bar for their "mobile friendly" criteria at a quite constant pace. No matter the workaround you use, the site would eventually show those errors again and again, unless the site is radically changed to that "modern" style with huge texts, huge links, and huge spaces between texts. Google doesn't consider that more than 80% of my traffic comes from desktop browsers, not from mobile (source: their own stats for my site), so my current site is more than correct with its current layout.
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
0 votes
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
–1 vote
by

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

let them know, do it.

0 votes
by

In my environment, the problem was in the Markdown Editor plugin. Once editing or adding an answer with <pre> block, the edit area and the preview area didn't wrap lines and kept the screen very wide (even on desktop displays): 

P.S.: This behavior was detected only by Google mobile usability test (that "clicks" on the "Answer" button). It was not detected when testing the page by common tools like Lighthouse.

I fixed it with (quite dirty) modifying of CSS file 
\qa-plugin\markdown-editor\pagedown\sample.css:

.wmd-preview pre,
.qa-a-item-content pre {
 width: 100%; /* ADDED */ 
 max-height: 400px;
 max-width: 685px;
 overflow: auto;
}

@media (max-width: 768px) {
 .wmd-preview pre,
 .qa-a-item-content pre {
     max-width: 550px;
 }
}
@media (max-width: 370px) {
 .wmd-preview pre,
 .qa-a-item-content pre {
     max-width: 250px;
 } 

...