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,52 @@
   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 (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 (max-width: 768px) {
+    h1,
+    .h1 {
+      font-size: 30px;
+      margin-top: 32px; } }
 
 h2, .center blockquote,
 .h2 {
   margin: 64px 0 32px 0;
   font-size: 28px;
   font-weight: 700; }
+  @media (max-width: 768px) {
+    h2, .center blockquote,
+    .h2 {
+      font-size: 22px;
+      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 +629,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 (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 +863,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 {
@@ -1031,32 +1047,42 @@
 html[dir="rtl"] .items .item::before {
   right: 0; }
 
 .group-container {
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
   padding: 96px 0; }
+  @media (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;
+  margin: 64px auto;
   padding: 0 16px; }
 
+@media (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 (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 +1550,20 @@
     padding-right: 208px; } }
 
 #footer {
   padding-top: 64px;
   padding-bottom: 96px;
   font-size: 70%;
   background-color: #292929;
   color: #FFFFFF; }
+  @media (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;