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
@@ skipping 282 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)

[juliandoucette, 2017/07/18 22:07:36]

Something funky seems to be going on at 992px wide.

[ire, 2017/07/20 17:43:25]

Done.

 {
 
   .group.cards
   {
     display: grid;
     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;
     width: 100%;
     grid-template-rows: auto 1fr auto;
   }
 
   .group.cards .card-summary
   {
-    @media all

[juliandoucette, 2017/07/18 22:07:36]

NIT: `@media all` doesn't seem to make a difference here because .group.cards is
already quite specific. I think the same applies below.

[ire, 2017/07/20 17:43:25]

Yep you're right :p . Done.

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