Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com

static/scss/components/_groups.scss

Index: static/scss/components/_groups.scss
===================================================================
--- a/static/scss/components/_groups.scss
+++ b/static/scss/components/_groups.scss
@@ -17,40 +17,61 @@
 // 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

[juliandoucette, 2017/06/09 14:08:26]

NIT: I don't like `margin-top: 0` here. It seems like we should drop the
vertical padding on `.group-container` and rely on the margin applied to it's
children for vertical spacing. What do you think?

[ire, 2017/06/14 15:41:13]

I'm not sure about this. The way I see it, all `.group-container`s should have
the same amount of padding. Relying on the children will make the padding
inconsistent, and also depends on the children having a top margin to begin
with. 

Note: For most things like headings, I prefer to apply margins in one direction
only (usually bottom). This way there is less conflict. I prefer margin-bottom
as I've found that margin-top is more likely to interfere with other things on
the page.

In this case, I think the overriding of the top margin is fine. Given the way
margins are applied, I think we are bound to have cases were overriding is
necessary. 

 

 {
   margin-top: 0;
+
+  @media (max-width: $desktop-breakpoint)
+  {
+    margin: $md auto;
+  }
 }
 
 .group .card,
 .group .item
 {
   display: table-cell;
   vertical-align: top;
 }