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

static/scss/content/_reset.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016 Eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 68 matching lines @@
   line-height: inherit;
 }
 
 // Remove image borders in IE<10
 a, img
 {
   border:none;
   outline:none;
 }
 
+// Simulate collapsable top-margin on first paragraph after page heading

[ire, 2017/07/06 10:31:38]

I added this comment here until we decide to revisit this issue so it's clear
why the style is here. 

[juliandoucette, 2017/07/06 13:15:48]

Acknowledged.

 h2 + .row,
 h1 + .row,
 h2 + hr + .row,
 h1 + hr + .row
 {
-  // Can't figure out why this is here, plus it was messing with some alignment — @Ire
-  // margin-top: -$sm;

[juliandoucette, 2017/05/16 19:07:34]

Better to delete it and add comment on this line in the code review.

[ire, 2017/05/16 21:32:28]

ACK

-
+  margin-top: -$sm;
 }
 
 .section
 {
-  margin: $xl 0;
+  margin-bottom: $xl;
 
-  @media screen and (max-width: $tablet-breakpoint)
+  @media (max-width: $tablet-breakpoint)
   {
-    margin: $md 0;
+    margin-bottom: $md;
   }
 }
 
 .section .section
 {
-  margin: $lg 0;
+  margin-bottom: $lg;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    margin-bottom: $md;
+  }
 }