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
This commit is contained in:
parent
eee902beff
commit
17a3b5b6b0
|
@ -1,20 +1,36 @@
|
||||||
@import '../../minerva.less/minerva.variables';
|
@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 ) {
|
@media all and ( min-width: @width-breakpoint-tablet ) {
|
||||||
.ns-special .pre-content {
|
.ns-special .pre-content {
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
.tagline,
|
.tagline,
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0 @contentMargin;
|
margin: 0 @contentMargin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ns-special #content {
|
|
||||||
background: @colorGray14;
|
|
||||||
|
|
||||||
form {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,8 @@
|
||||||
|
|
||||||
// Specific to override mobile display
|
// Specific to override mobile display
|
||||||
.heading-holder .tagline {
|
.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,
|
h1,
|
||||||
|
|
Loading…
Reference in New Issue