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

scss/main.scss

Index: scss/main.scss
===================================================================
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -4,26 +4,27 @@
 
 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;
 }
 
 
@@ -41,69 +42,87 @@
 }
 .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;
+$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%; }
+  @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;
   }
 
 }