[Demo] Issue 4961 - Fix card group field alignment on acceptableads.com

scss/main.scss

 * {
   box-sizing: border-box;
 }
 
 body {
   background: grey;
   padding: 0;
   margin: 0;
 }
 
 h2 {
-  font-size: 30px;
+  font-size: 26px;
 }
 
 p {
   margin: 0 0 10px;
   padding: 0;
 }
 
 .card-group {
   padding: 30px;
+  width: 100%;
 }
 
 .card {
   background: #fff;
   border: 1px solid black;
 }
 
 
 // Note: With both solutions, I use a fixed header height
 $card__header--height: 100px;

[juliandoucette, 2017/05/23 11:52:00]

This is not ideal. We have a problem with long headers on aa.com.

[ire, 2017/05/23 17:21:44]

Noted. I'm not sure, but there may be a way with Grid to have a fluid height.
I'll do a bit more research on that.

 
 .card__header {
   height: $card__header--height;
   margin-bottom: 20px;
   border: 2px solid plum;
 }
 
 .card__content {
   border: 2px solid cornflowerblue;
 }
 .card__footer {
   border: 2px solid lightcoral;
 }
 
 
 
 
-/* Table Layout Fallback
- * Note - requires a set height for the .card__footer
+/* Float Layout Fallback
+ * Note - requires a set height for the .card__footer and .card__content 
  */
 
 $card__footer--height: 30px;

[ire, 2017/05/19 05:37:57]

@julian Here is the main difference between the two methods. This one requires a
set height for the card footer

[juliandoucette, 2017/05/23 11:52:00]

Acknowledged.

I think this is a reasonable limitation because we can control the content in a
button easier than the content in a title or description.

[ire, 2017/05/23 17:21:44]

Acknowledged.

+$card__content--height: 180px;
 
-.card-group {
+.card-group:after {
+  clear: both;
+  content: "";
   display: table;
 }
 
 .card {
-  display: table-cell;
+  
   position: relative;
+  width: 100%;
 
-  width: 100%;
-  @media (min-width: 600px) { width: 50%; }
-  @media (min-width: 800px) { width: 33%; }

[ire, 2017/05/19 05:37:57]

@julian Another difference is that the breakpoints have to be set manually. So
they may not break at the exact optimal points based on a max/min width we want
each card to be.

[juliandoucette, 2017/05/23 11:52:00]

Acknowledged.

This doesn't resize well :(

Ideally, the fallback solution should stack. If not, I think it should scroll.
Squished content is worse than not aligned content.

[ire, 2017/05/23 17:21:44]

On 2017/05/23 11:52:00, juliandoucette wrote: 
It actually should be stacked. Maybe there's an issue, I will check it out to
make sure.

+  @media (min-width: 600px) { 
+    width: 50%;
+    float: left;
+   }
+
+  @media (min-width: 800px) { 
+    width: 33%;
+   }
 }
 
 .card__content {
   margin-bottom: $card__footer--height + 20px;
+
+  @media (min-width: 600px) {
+    height: $card__content--height;
+  }
 }
 
 .card__footer {
   height: $card__footer--height;
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
 }
 
 
 
 /* Grid Layout Enhancement
- *
+ * Note - Only requires set height for the .card__header, and a max width for each .card
  */
 $card--max-width: 300px;
 
-@supports (display: grid) {
+@supports not (display: grid) {
 
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax($card--max-width, 1fr))
   }
 
   .card {
     display: inline-grid;
     grid-template-rows: minmax($card__header--height, auto) 1fr auto;
-    @media all { width: 100%; }
+
+    @media all { 
+      width: 100%;
+      float: none; 
+    }
   }
 
   .card__content {
     margin-bottom: 20px;
+    height: auto;
   }
 
   .card__footer {
     position: relative;
     height: auto;
   }
 
 }