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

static/scss/components/_groups.scss

Index: static/scss/components/_groups.scss
===================================================================
--- a/static/scss/components/_groups.scss
+++ b/static/scss/components/_groups.scss
@@ -17,40 +17,61 @@
 // display like a table (even grid)
 
 .group-container
 {
   width: 100%;
   max-width: $max-width;
   margin: 0 auto;
   padding: $xl 0;
+
+  @media screen and (max-width: $desktop-breakpoint)

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

Note: There was an inconsistent border-left on card group items that was made
more apparent to me when reviewing this change. I pushed an non-issue fix for
this https://hg.adblockplus.org/web.acceptableads.com/rev/86d35c4f2fb5.

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

Okay. Do I need to apply those changes here, or will the difference be resolved
when this issue is pushed?

[juliandoucette, 2017/06/07 18:05:28]

You can just pull and rebase if there is a conflict (I don't think there will
be).

+  {
+    padding: $xs;
+  }
 }
 
 .group-container > %headings,
 .group-container > p
 {
   margin: $xl auto;
   padding: 0 $sm;
 }
 
+
+.group-container > p

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

Looks good on mobile, but not on desktop. I think we should shrink this space on
desktop too. 

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

Acknowledged.

+{
+  @media screen and (max-width: $desktop-breakpoint)
+  {
+    margin: $md auto;
+  }
+}
+
+
+
 .group
 {
   display: table;
   width: 100%;
   table-layout: fixed;
 }
 
 .group-container .group
 {
   margin-bottom: 0;
 }
 
 .group-container > %headings
 {
   margin-top: 0;
+
+  @media screen and (max-width: $desktop-breakpoint)
+  {
+    margin: $md auto;
+  }
 }
 
 .group .card,
 .group .item
 {
   display: table-cell;
   vertical-align: top;
 }