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;
 }
 
-h2 + .row,

[juliandoucette, 2017/07/05 13:28:33]

I was wondering why there was less spacing after hr in production... I see now
(margins don't collapse above/below rows of columns).

e.g.

h1
hr
p

Looks different than

h1
hr
row
col
p
col
p

I can't think of a perfect way around this off of the top of my head because I
think that I can't predict what will be above/below and inside of rows/columns
(the margins inside and out could be different depending on that) therefore
killing the margin-top on the :first-child and margin-bottom on the :last-child
would not be the same as collapsing above/below (unless the above/below margins
were always larger than those inside).

Leaving this as-is in the latest patchset will cause the heading margin to look
different across pages depending on whether there are rows/columns below (e.g.
compare http://localhost:5000/en/about to
http://localhost:5000/en/about/criteria). But I am willing to allow this for now
and consider this a worthy website-defaults issue.

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

I've added this style back. 

-h1 + .row,
-h2 + hr + .row,
-h1 + hr + .row
-{
-  margin-top: -$sm;
-}
 
 .section
 {
-  margin: $xl 0;
+  margin-bottom: $xl;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    margin-bottom: $md;
+  }
 }
 
 .section .section
 {
-  margin: $lg 0;
+  margin-bottom: $lg;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    margin-bottom: $md;
+  }
 }