Fix sidebar placement on large mobile devices

Inconsistency between media queries and qa_is_mobile_probably()

qa-theme/SnowFlat/qa-styles.css

@@ -2727,74 +2727,60 @@ input[type="submit"], button {
 	display: none;
 }
 
-@media (max-width: 767px) {
-	#qam-sidepanel-toggle {
-		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;
-	}
-	#qam-sidepanel-toggle.active {
-		opacity: 1;
-		color: #34495e;
-		right: 250px;
-		box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
-	}
-	#qam-sidepanel-toggle [class^="icon-"]:before, #qam-sidepanel-toggle [class*=" icon-"]:before {
-		line-height: 40px;
-		width: 30px;
-		height: 40px;
-		text-align: center;
-		color: #fff;
-	}
+#qam-sidepanel-toggle {
+	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;
 }
-@media (min-width: 980px) {
-	#qam-sidepanel-toggle {
-		display: none;
-	}
+#qam-sidepanel-toggle.active {
+	opacity: 1;
+	color: #34495e;
+	right: 250px;
+	box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
+}
+#qam-sidepanel-toggle [class^="icon-"]:before, #qam-sidepanel-toggle [class*=" icon-"]:before {
+	line-height: 40px;
+	width: 30px;
+	height: 40px;
+	text-align: center;
+	color: #fff;
 }
 
-.stick {
-	top: 10px !important;
+#qam-sidepanel-mobile {
+	background: #fff;
+	position: fixed;
+	right: -250px;
+	top: 0;
+	height: 100%;
+	width: 250px;
+	overflow-y: auto;
+	z-index: 99999;
 	transition: all 0.15s ease;
+	box-shadow: 0 0 0 0 transparent;
+}
+#qam-sidepanel-mobile.open {
+	right: 0 !important;
+	transition: all 0.15s ease;
+	box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
 }
 
-@media (max-width: 767px) {
-	#qam-sidepanel-mobile {
-		background: #fff;
-		position: fixed;
-		right: -250px;
-		top: 0;
-		height: 100%;
-		width: 250px;
-		overflow-y: auto;
-		z-index: 99999;
-		transition: all 0.15s ease;
-		box-shadow: 0 0 0 0 transparent;
-	}
-	#qam-sidepanel-mobile.open {
-		right: 0 !important;
-		transition: all 0.15s ease;
-		box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
-	}
+
+.stick {
+	top: 10px !important;
+	transition: all 0.15s ease;
 }
 
 .qa-sidepanel h1, .qa-sidepanel h2, .qa-sidepanel h3, .qa-sidepanel h4, .qa-sidepanel h5, .qa-sidepanel h6 {
 	margin-top: 0px;
 }
-@media (min-width: 980px) {
-	.qa-sidepanel {
-		overflow: hidden;
-		*zoom: 1;
-	}
-}
 .qa-sidepanel .qa-widget-side {
 	padding: 20px;
 	margin-bottom: 5px;
@@ -3626,11 +3612,3 @@ input[type="submit"], button {
 		float: left;
 	}
 }
-
-@media (min-width: 980px) {
-	.qa-sidepanel {
-		width: 25%;
-		padding: 0px;
-		float: right;
-	}
-}

qa-theme/SnowFlat/qa-theme.php

@@ -90,7 +90,7 @@ class qa_html_theme extends qa_html_theme_base
 		qa_html_theme_base::head_css();
 
 		// output some dynamic CSS inline
-		$this->output($this->head_inline_css());
+		$this->head_inline_css();
 	}
 
 	/**
@@ -654,9 +654,9 @@ class qa_html_theme extends qa_html_theme_base
 		$css .= ( (!qa_is_logged_in() ) ? '.qa-nav-user{margin:0 !important;}' : null );
 		if (qa_request_part(1) !== qa_get_logged_in_handle()) {
 			$css .= '@media (max-width: 979px){';
-			$css .= 'body.qa-template-user.fixed, body[class^="qa-template-user-"].fixed, body[class*="qa-template-user-"].fixed{';
-			$css .= 'padding-top: 118px !important;';
-			$css .= '}';
+			$css .= ' body.qa-template-user.fixed, body[class^="qa-template-user-"].fixed, body[class*="qa-template-user-"].fixed {';
+			$css .= '  padding-top: 118px !important;';
+			$css .= ' }';
 			$css .= '}';
 			$css .= '@media (max-width: 979px){body.qa-template-users.fixed{
 				padding-top: 95px !important; }
@@ -665,9 +665,20 @@ class qa_html_theme extends qa_html_theme_base
 				padding-top: 105px !important;}
 			}';
 		}
+
+		// sidebar styles for desktop (must use server-side UA detection, not media queries)
+		if (!qa_is_mobile_probably()) {
+			$css .= '.qa-sidepanel {';
+			$css .= ' width: 25%;';
+			$css .= ' padding: 0px;';
+			$css .= ' float: right;';
+			$css .= ' overflow: hidden;';
+			$css .= ' *zoom: 1;';
+			$css .= '}';
+		}
 		$css .= '</style>';
 
-		return $css;
+		$this->output($css);
 	}
 
 	/**