Question2Answer: how to make SnowFlat theme mobile friendly

Question

The default theme "SnowFlat" of Question2Answer is not mobile-friendly. Google mobile-friendly test gives the following two errors: 

• Clickable elements too close together
• Content wider than screen

How can I fix these issues so that Google stops complaining? 

Answer 1

As discussed on the Question2Answer QA portal, it seems that the side panel is the root cause of the problem. But the fix is also very simple. Open the CSS file "qa-theme/SnowFlat/qa-styles.css" and add the three statements in bold to the CSS file. This website is based on Q2A CMS and is now mobile-friendly because of these changes. You can check any page of this website.

@media (max-width: 979px) {
	#qam-sidepanel-toggle {
		display: none;	/* fix for mobile friendly test */
		position: fixed;
		bottom: 10px;
		right: 0;
		text-align: center;
		font-size: 24px;
		background: #9b59b6;
		cursor: pointer;
		transition: all 0.15s ease;
		color: #95a5a6;
		opacity: 0.5;
		z-index: 999;
	} 
.qa-sidepanel {
		display: none;	/* fix for mobile friendly test */
		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; /* fix for mobile friendly test*/ 
		right: 0 !important;
		transition: all 0.15s ease;
		box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
	}