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

static/scss/components/_cards.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 11 matching lines @@
   color: $primary-fg;
   border: 1px solid $primary-fg;
   background-color: $primary-bg;
 }
 
 .card %headings
 {
   @extend h3;
   height: $md + $sm;
   margin: $sm 0 $sm 0;
+
+  @media (max-width: $mobile-breakpoint)

[juliandoucette, 2017/06/16 18:47:53]

NIT: I'm guessing you are using max-width to [be consistent, make the smallest
change possible]. I would actually prefer mobile-first min-width here and
elsewhere.

[ire, 2017/06/19 11:51:04]

I would generally opt for min-width everywhere as well. However, I prefer
consistency within the project over writing it in a way I would have liked in
only some cases. Although min-width is preferable, I don't know if it's worth
causing the inconsistency here (unless you are suggesting we refactor
everything?)

[juliandoucette, 2017/06/20 16:38:35]

You're right.

We should assess changing this separately (if it's worth it).

[ire, 2017/06/22 15:41:44]

My initial thought is that it's not worth it. Because although max-width isn't
preferable, it's also not problematic. 

+  {
+    height: auto;
+  }
 }
 
 .card-icon
 {
   margin: $sm 0;
 }
 
 .center .card-icon
 {
   margin: $lg - $sm 0 $md 0;
+
+  @media (max-width: $tablet-breakpoint)
+  {
+    margin-top: $md;
+  }
+  @media (max-width: $mobile-breakpoint)
+  {
+    margin-top: $sm;
+  }
 }
 
 img.card-icon,
 .card-icon img
 {
   height: 48px;
 }
 
 .card img.block
 {
   margin: 0;
 }
 
 .card-summary {
   margin: $md 0;
   height: $lg;
+
+  @media (max-width: $mobile-breakpoint)
+  {
+    margin: $sm;
+    height: auto;
+  }
 }
 
 // negative margin shrinks containing paragraph margin
 .card %buttons
 {
   display: block;
   width: 100%;
   margin-bottom: -$xs;
 }
 
@@ skipping 61 matching lines @@
 .card.list a
 {
   text-decoration: none;
   color: $primary-fg;
 }
 
 .card.list a%active
 {
   color: $accent;
 }