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

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -416,45 +416,51 @@
   padding: 0;
   font-size: 18px;
   line-height: inherit; }
 
 a, img {
   border: none;
   outline: none; }
 
-h2 + .row, .center blockquote + .row,
-h1 + .row,
-h2 + hr + .row, .center blockquote + hr + .row,
-h1 + hr + .row {
-  margin-top: -16px; }
-
 .section {
   margin: 96px 0; }
+  @media screen and (max-width: 768px) {
+    .section {
+      margin: 32px 0; } }
 
 .section .section {
   margin: 64px 0; }
 
 h1, h2, .center blockquote, h3, .group.items .item::before, h4, h5, h6 .h1, .h2, .h3, .h4, .h5, .h6 {
   text-transform: uppercase;
   font-weight: 700;
   line-height: 120%; }
 
 h1,
 .h1 {
   margin: 96px 0 64px 0;
   text-transform: none;
   font-size: 42px;
   font-weight: 300; }
+  @media screen and (max-width: 768px) {
+    h1,
+    .h1 {
+      font-size: 32px;
+      margin: 32px 0 64px 0; } }
 
 h2, .center blockquote,
 .h2 {
   margin: 64px 0 32px 0;
   font-size: 28px;
   font-weight: 700; }
+  @media screen and (max-width: 768px) {
+    h2, .center blockquote,
+    .h2 {
+      margin: 32px 0 32px 0; } }
 
 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6, .group.items .item::before,
 .h3,
 .group.items .item h1,
 .group.items .item h2,
 .group.items .item .center blockquote,
 .center .group.items .item blockquote,
 .group.items .item h3,
@@ -622,18 +628,22 @@
 html[dir="rtl"] blockquote {
   border-right: 4px solid #E1E1E1; }
 
 html .center blockquote {
   border: none; }
 
 .center blockquote {
   margin: 0;
-  padding: 96px 0;
+  padding: 64px 0;
   font-style: normal; }
+  @media screen and (max-width: 768px) {
+    .center blockquote {
+      font-size: 22px;
+      padding: 32px 0; } }
 
 .center blockquote p:last-child {
   margin-top: -8px; }
 
 cite {
   font-size: 14px;
   font-style: normal; }
 
@@ -852,16 +862,21 @@
   padding-left: 16px; }
 
 html[dir="ltr"] .row .col-3, html[dir="ltr"] .row .col-4, html[dir="ltr"] .row .col-5, html[dir="ltr"] .row .col-6, html[dir="ltr"] .row .col-7, html[dir="ltr"] .row .col-8, html[dir="ltr"] .row .col-9 {
   float: left; }
 
 html[dir="rtl"] .row .col-3, html[dir="rtl"] .row .col-4, html[dir="rtl"] .row .col-5, html[dir="rtl"] .row .col-6, html[dir="rtl"] .row .col-7, html[dir="rtl"] .row .col-8, html[dir="rtl"] .row .col-9 {
   float: right; }
 
+@media (max-width: 991px) {
+  .row .col-3, .row .col-4, .row .col-5, .row .col-6, .row .col-7, .row .col-8, .row .col-9 {
+    padding-top: 8px;
+    padding-bottom: 8px; } }
+
 @media (min-width: 544px) {
   .col-3 {
     width: 50%; }
   html[dir="ltr"] .push-3 {
     left: 50%; }
   html[dir="ltr"] .pull-3 {
     right: 50%; }
   html[dir="rtl"] .push-3 {
@@ -949,16 +964,21 @@
   margin: 16px 0; }
 
 .center .card-icon {
   margin: 48px 0 32px 0; }
 
 img.card-icon,
 .card-icon img {
   height: 48px; }
+  @media screen and (max-width: 768px) {
+    img.card-icon,
+    .card-icon img {
+      height: 30px;
+      margin: 8px 0; } }
 
 .card img.block {
   margin: 0; }
 
 .card-summary {
   margin: 32px 0;
   height: 64px; }
 
@@ -1031,32 +1051,42 @@
 html[dir="rtl"] .items .item::before {
   right: 0; }
 
 .group-container {
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
   padding: 96px 0; }
+  @media screen and (max-width: 992px) {
+    .group-container {
+      padding: 8px; } }
 
 .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6,
 .group-container > p {
   margin: 96px auto;
   padding: 0 16px; }
 
+@media screen and (max-width: 992px) {
+  .group-container > p {
+    margin: 32px auto; } }
+
 .group {
   display: table;
   width: 100%;
   table-layout: fixed; }
 
 .group-container .group {
   margin-bottom: 0; }
 
 .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6 {
   margin-top: 0; }
+  @media screen and (max-width: 992px) {
+    .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6 {
+      margin: 32px auto; } }
 
 .group .card,
 .group .item {
   display: table-cell;
   vertical-align: top; }
 
 .group.items .item::before {
   margin-top: 16px;
@@ -1524,16 +1554,20 @@
     padding-right: 208px; } }
 
 #footer {
   padding-top: 64px;
   padding-bottom: 96px;
   font-size: 70%;
   background-color: #292929;
   color: #FFFFFF; }
+  @media screen and (max-width: 768px) {
+    #footer {
+      padding-top: 32px;
+      padding-bottom: 64px; } }
   #footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote, #footer h3, #footer .group.items .item::before, .group.items #footer .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6 {
     position: relative;
     margin-bottom: 32px;
     padding-top: 8px; }
   #footer h1::before, #footer h2::before, #footer .center blockquote::before, .center #footer blockquote::before, #footer h3::before, #footer .group.items .item::before, .group.items #footer .item::before, #footer h4::before, #footer h5::before, #footer h6 .h1::before, h6 #footer .h1::before, #footer .h2::before, #footer .h3::before, #footer .h4::before, #footer .h5::before, #footer .h6::before {
     display: block;
     position: absolute;
     top: 0;