+4 votes
in CMS Tips by (1.9k points)

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? 

1 Answer

0 votes
by (25.6k points)
edited by

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