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

static/scss/content/_reset.scss

Index: static/scss/content/_reset.scss
===================================================================
--- a/static/scss/content/_reset.scss
+++ b/static/scss/content/_reset.scss
@@ -81,25 +81,28 @@
 
 // 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;
+  }
 }