Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com

static/scss/content/_typography.scss

Index: static/scss/content/_typography.scss
===================================================================
--- a/static/scss/content/_typography.scss
+++ b/static/scss/content/_typography.scss
@@ -25,24 +25,35 @@
 
 h1,
 .h1
 {
   margin: $xl 0 $lg 0;
   text-transform: none;
   font-size: $font-size-h1;
   font-weight: 300;
+
+  @media screen and (max-width: $tablet-breakpoint)
+  {
+    font-size: $font-size-h1 - 10px;
+    margin: $md 0 $lg 0;

[juliandoucette, 2017/05/30 14:22:57]

NIT: It would be more straightforward if you just changed margin-top

[ire, 2017/05/30 17:44:59]

Acknowledged.

+  }
 }
 
 h2,
 .h2
 {
   margin: $lg 0 $md 0;
   font-size: $font-size-h2;
   font-weight: 700;
+
+  @media screen and (max-width: $tablet-breakpoint)
+  {
+    margin: $md 0 $md 0;
+  }
 }
 
 h3,
 .h3
 {
   margin: $lg 0 $md 0;
   font-size: $font-size-h3;
   font-weight: 700;
@@ -287,18 +298,24 @@
 {
   border: none;
 }
 
 .center blockquote
 {
   @extend h2;
   margin: 0;
-  padding: $xl 0;
+  padding: $lg 0;
   font-style: normal;
+
+  @media screen and (max-width: $tablet-breakpoint)
+  {
+    font-size: $font-size-h3;
+    padding: $md 0;
+  }
 }
 
 .center blockquote p:last-child
 {
   margin-top: -$xs;
 }
 
 cite