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

static/scss/components/_groups.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016 Eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
 
 // display like a table (even grid)
 
 .group-container
 {
   width: 100%;
   max-width: $max-width;
   margin: 0 auto;
   padding: $xl 0;
+
+  @media (max-width: $desktop-breakpoint)
+  {
+    padding: $xs;
+  }
 }
 
 .group-container > %headings,
 .group-container > p
 {
-  margin: $xl auto;
+  margin: $lg auto;
   padding: 0 $sm;
+}
+
+.group-container > p
+{
+  @media (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 (max-width: $desktop-breakpoint)
+  {
+    margin: $md auto;
+  }
 }
 
 .group .card,
 .group .item
 {
   display: table-cell;
   vertical-align: top;
 }
 
 .group.items .item::before
@@ skipping 216 matching lines @@
   }
   // un-center all cards
   .group > div:nth-child(4),
   .group > div:nth-child(3),
   .group > div:nth-child(5)
   {
     margin-left: 0;
   }
 }
 
-@supports (display: grid) 
-{
-
-  .group
+@supports (display: grid)
+{
+
+  .group.cards
   {
     display: grid;
-    // Each card should be a minimum width of the $card-max-width. Otherwise, take up available space
-    grid-template-columns: repeat(auto-fit, minmax($card-max-width, 1fr));
-  }
-
-  .group .card 
+    grid-template-columns: repeat(1, 1fr);
+
+    @media (min-width: $card-min-width)
+    {
+      // Each card should be a minimum width of the $card-min-width. Otherwise, take up available space
+      grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr));
+    }
+  }
+
+  .group.cards .card
   {
     display: inline-grid;
-  }
-
-  .group-4 
-  {
-    @media (min-width: $desktop-breakpoint) 
+    width: 100%;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .group.cards .card-summary
+  {
+    height: auto;
+  }
+
+  .group-4.cards
+  {
+    @media (min-width: $desktop-breakpoint)
     {
       // Each card should take a minimum of 25% width of the group
       grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
     }
   }
 
-  .group-5 

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

I'm not sure how/why yet - but this patchset seems to break the centring of the
last card in 5 & 3 card groups. 

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

I've fixed the centering of the last card in 5 card groups, but I don't see any
uses of 3 card groups (unless you count this page -
http://localhost:5000/en/committee - which is actually a `.group-4`). Plus,
there doesn't seem to be a centering of the last card in 3 card groups looking
at the CSS.

-  {
-    @media (min-width: $desktop-breakpoint) 
+  .group-5.cards
+  {
+    @media (min-width: $tablet-breakpoint)
+    {
+      grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
+    }
+    @media (min-width: $desktop-breakpoint)
     {
       grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
     }
   }
 
-  .group-5 > div:nth-child(4) 

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

Since this is overwriting a previous style, I stuck with the `> div` selector

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

Acknowledged.

-  {
-    @media all 

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

Why @media all?

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

See comment above

-    {
-      margin-left: 0;
-    }
-  }
-
-}
+  .group-5.cards > div:nth-child(4),
+  .group-5.cards > div:nth-child(5)
+  {
+    margin-left: 0;
+  }
+
+  .group-5.cards > div:nth-child(4)
+  {
+    @media (min-width: $tablet-breakpoint) and (max-width: $desktop-breakpoint - 1px)
+    {
+      margin-left: 50%;
+    }
+  }
+
+  .group-5.cards > div:nth-child(5)
+  {
+    @media (min-width: 700px) and (max-width: $desktop-breakpoint - 1px)
+    {
+      margin-left: 50%;
+    }
+  }
+}