Answered: How to fix mobile friendly errors in SnowFlat theme?

Post date: 2022-05-18 23:12:49
Views: 12

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-pluginmarkdown-editorpagedownsample.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;
 } 

Please click Here to read the full story.
 
Other Top and Latest Questions:
Pending Recession-Filter: Should I reduce my 401k contribution?
I want to add Bangla font to my site
Small splinter in the bottom of my foot... help?
How does one learn to be more outdoorsy?
What do people play in garage bands/open mics these days?
Willy Wonky
can i get ebay to stop forcing me to reset my password?
Movie: The Descent: Part 2
Movie: Operation Mincemeat
Iron Chef: Quest for an Iron Legend: Battle Street Food: Mason Hereford vs Curtis Stone