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
@@ -34,22 +34,29 @@
 .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

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