Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+9 votes
616 views
in Q2A Core by
edited by

So many pages of my website not mobile-friendly showing in google search console. I am using snowflat theme. Anyone here facing the same problem? I don't know how to fix this. My google search ranking also suddenly dropped. Please help me.

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?

4 Answers

+1 vote
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

+2 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
0 votes
by
I have been experiencing this problem since I started using snowflat. I was using cleastrap and the errors were not there. Can someone please do some update on this theme "cleanstrap"
+1 vote
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".

...