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)
+  {
+    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;
 }