From 17a3b5b6b0fab97391c690b3a3cb538793215ad5 Mon Sep 17 00:00:00 2001
From: takidelfin <takidelfin@gmail.com>
Date: Fri, 9 Nov 2018 19:38:37 +0100
Subject: [PATCH] Special:MobileOptions: Consistent padding of heading

Fixed it by adding a new media query for <720px and defining `default` for MobileOptions regardless of screen width.

Bug: T202557
Change-Id: I11deac1a36d9ab02ccfbce639490a95ca176f136
---
 .../minerva.less                              | 36 +++++++++++++------
 skinStyles/mobile.special.styles/minerva.less |  3 +-
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/skinStyles/mobile.special.mobileoptions.styles/minerva.less b/skinStyles/mobile.special.mobileoptions.styles/minerva.less
index 80dbd04..0d0a337 100644
--- a/skinStyles/mobile.special.mobileoptions.styles/minerva.less
+++ b/skinStyles/mobile.special.mobileoptions.styles/minerva.less
@@ -1,20 +1,36 @@
 @import '../../minerva.less/minerva.variables';
 
+.ns-special {
+	#content {
+		background: @colorGray14;
+		.pre-content, form {
+			background: #fff;
+		}
+	}
+}
+
+// T202557: This media query is for mobile devices (less wide than tablet)
+// It overrides default special page style to center the header and content properly.
+// Also it adds a 1px horizontal line as a seperator beetwen header and content
+@media all and ( max-width: ( @width-breakpoint-tablet - 1px ) ) {
+	.ns-special #content .pre-content {
+		margin: 0;
+		#section_0 {
+			padding: 34px 16px 0;
+		}
+		.tagline {
+			margin-bottom: 1px;
+			// This is needed because tagline needs to be positioned correctly
+			padding: 0 16px 16px;
+		}
+	}
+}
+
 @media all and ( min-width: @width-breakpoint-tablet ) {
 	.ns-special .pre-content {
-		background: #fff;
-
 		.tagline,
 		h1 {
 			margin: 0 @contentMargin;
 		}
 	}
-
-	.ns-special #content {
-		background: @colorGray14;
-
-		form {
-			background: #fff;
-		}
-	}
 }
diff --git a/skinStyles/mobile.special.styles/minerva.less b/skinStyles/mobile.special.styles/minerva.less
index 6dfeb59..916a2d9 100644
--- a/skinStyles/mobile.special.styles/minerva.less
+++ b/skinStyles/mobile.special.styles/minerva.less
@@ -30,7 +30,8 @@
 
 	// Specific to override mobile display
 	.heading-holder .tagline {
-		margin-bottom: 15px;
+		margin-bottom: 16px;
+		padding-bottom: 16px; // Without it, margin starts right after the tagline and this feels like a bug.
 	}
 
 	h1,