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;

[juliandoucette, 2017/05/16 19:07:34]

Awesome!

(NIT: No extra line breaks please.)

[ire, 2017/05/16 21:32:28]

ACK

 
+  @media (max-width: $tablet-breakpoint)
+  {
+    margin-top: $md;
+  }
+  @media (max-width: $mobile-breakpoint)
+  {
+    margin-top: $sm;
+  }
 }
 
 img.card-icon,

[juliandoucette, 2017/05/30 14:22:56]

I don't think that these icons are too big on mobile :/

If you do, can you please run this by product and address it in a separate
issue?

[ire, 2017/05/30 17:44:58]

Acknowledged.

 .card-icon img
 {
   height: 48px;
-
-  @media screen and (max-width: $tablet-breakpoint)

[juliandoucette, 2017/05/16 19:07:34]

We have been restricting each file to one media query per size and including
selectors within.

I like your approach. Would you like to make a case for it at a frontend
developer meeting and potentially change our code style?

[juliandoucette, 2017/05/16 19:07:34]

Why screen? This would be useful for print too?

[ire, 2017/05/16 21:32:27]

Thanks! Yes I will.

[ire, 2017/05/16 21:32:28]

Kind of a habit to write screen for most cases. You're right, will make this
more agnostic

[juliandoucette, 2017/05/17 13:09:11]

Cool :)

Can you [explain in markdown, upload explanation to codereview, and set Manvel,
Thomas, and I as reviewers] please?

That way, we may or may not have to fix the @media style in this change.

[ire, 2017/05/18 00:27:14]

Sure. Do you mean as a separate codereview (i.e. a different repo with the one
file)?

-  {
-    height: 30px;
-    margin: $xs 0;
-  }
 }
 
 .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;
 }