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

static/scss/components/_cards.scss

Index: static/scss/components/_cards.scss
===================================================================
--- a/static/scss/components/_cards.scss
+++ b/static/scss/components/_cards.scss
@@ -24,42 +24,62 @@
   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;