Issue 4961 - Fix card group field alignment 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
@@ -26,16 +26,26 @@
 
 .card %headings
 {
   @extend h3;
   height: $md + $sm;
   margin: $sm 0 $sm 0;
 }
 
+.card article .card-heading 

[juliandoucette, 2017/06/16 19:39:16]

Why article?

[ire, 2017/06/21 07:47:57]

I was selecting the cards on the `pages/committee/index.md`. This replaces the
inline styles that were on that page. (Or are inline styles preferable?)

+{
+  height: auto;
+
+  @media (min-width: 700px)

[juliandoucette, 2017/06/16 19:39:16]

Why 700?

[ire, 2017/06/21 07:47:57]

Sorry, this was supposed to be the $tablet-breakpoint variable :/

+  {
+    height: 120px;
+  }
+}
+
 .card-icon
 {
   margin: $sm 0;
 }
 
 .center .card-icon
 {
   margin: $lg - $sm 0 $md 0;
@@ -131,8 +141,32 @@
   text-decoration: none;
   color: $primary-fg;
 }
 
 .card.list a%active
 {
   color: $accent;
 }
+
+@supports (display: grid) 
+{
+
+  .group .card 

[juliandoucette, 2017/06/16 19:39:16]

I think anything .group should go in _group.scss.

[ire, 2017/06/21 07:47:57]

Acknowledged.

+  {
+    width: 100%;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .group .card .card-summary 
+  {
+    @media all 

[juliandoucette, 2017/06/16 19:39:17]

Why @media all?

[ire, 2017/06/21 07:47:58]

This is to override the various media queries that are applied in the non-grid
solution. 

+    {
+      height: auto;
+    }
+  }
+
+  .card-footer .m-t-md 
+  {
+    margin-top: 0 !important;

[ire, 2017/06/13 16:51:23]

This is to remove the large top margin that's on the cards on the Solutions page
(e.g. includes/solutions/publishers.md)

[juliandoucette, 2017/06/16 19:39:16]

Perhaps this should go in includes/solutions/styles then (if we do need it) ?

[ire, 2017/06/21 07:47:57]

Okay I will move it then

+  }
+
+}