How to fix mobile friendly errors in SnowFlat theme?

Question

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:

Comments

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?

---

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

---

any solution?

---

I have solved it see my answer

---

you have to create a copy of snowflat theme and name it as SnowFlat Mobile

Answer 1

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

Answer 2

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? 

Comments

Please give a solution

---

Give a solution

---

I have the same problem please anyone

Answer 3

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".

Comments

it's still showing both errors on "check mobile-friendly" site

---

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.

Answer 4

// 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;

Comments

in
qa-theme/SnowFlat Mobile/qa-theme.php

Answer 5

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). 

Answer 6

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

Answer 7

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

let them know, do it.

Answer 8

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;
 }