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

static/css/main.css

 .m-a-na {
   margin: 0 0 !important; }
 
 .m-t-na {
   margin-top: 0 !important; }
 
 .m-b-na {
   margin-bottom: 0 !important; }
 
 .m-x-na {
@@ skipping 403 matching lines @@
   width: 100%;
   margin-bottom: 16px;
   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; }
+  margin-bottom: 96px; }
   @media (max-width: 768px) {
     .section {
-      margin: 32px 0; } }
+      margin-bottom: 32px; } }
 
 .section .section {
-  margin: 64px 0; }
+  margin-bottom: 64px; }
   @media (max-width: 768px) {
     .section .section {
-      margin: 32px 0; } }
+      margin-bottom: 32px; } }
 
 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;
@@ skipping 306 matching lines @@
   width: 24px;
   height: 3px;
   margin: 16px 0;
   border: none;
   background-color: #161616; }
 
 h1 + hr,
 h2 + hr, .center blockquote + hr {
   position: absolute;
   margin: -32px 0 32px 0; }
+  @media (max-width: 544px) {
+    h1 + hr,
+    h2 + hr, .center blockquote + hr {
+      margin-top: -21px; } }
 
 .center hr {
   margin: 16px auto; }
 
 table {
   border-collapse: collapse !important; }
 
 table td,
 table th {
   background-color: #FFFFFF; }
@@ skipping 83 matching lines @@
 
 .inline-buttons {
   margin-top: 64px;
   margin-bottom: 64px;
   text-align: right; }
 
 @media (min-width: 544px) {
   .inline-buttons a,
   .inline-buttons input {
     margin-left: 16px; } }
+
+.btn-container {
+  margin-top: 16px;
+  margin-bottom: 16px; }
+  @media (min-width: 544px) {
+    .btn-container {
+      margin-top: 32px;
+      margin-bottom: 32px; } }
+  @media (min-width: 768px) {
+    .btn-container {
+      margin-top: 64px;
+      margin-bottom: 64px; } }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea,
 select {
@@ skipping 42 matching lines @@
   padding-left: 16px; }
 
 .row {
   margin-right: -16px;
   margin-left: -16px; }
 
 .row::after {
   display: table;
   clear: both;
   content: ""; }
-
-.row p:first-child {
-  margin-top: 0; }
 
 .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
   width: 100%; }
 
 .row .col-3, .row .col-4, .row .col-5, .row .col-6, .row .col-7, .row .col-8, .row .col-9 {
   position: relative;
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px; }
 
@@ skipping 233 matching lines @@
   vertical-align: top; }
 
 .group.items .item::before {
   margin-top: 16px;
   text-align: center;
   width: 45px; }
 
 html[dir="ltr"] .group .card + .card {
   border-left: 0; }
 
+@media (max-width: 768px) {
+  html[dir="ltr"] .group .card:first-child {
+    border-left: 0; } }
+
 html[dir="rtl"] .group .card + .card {
   border-right: 0; }
+
+@media (max-width: 768px) {
+  html[dir="rtl"] .group .card:last-child {
+    border-right: 0; } }
 
 .group.items .item {
   position: relative;
   margin-bottom: 32px;
   padding: 0 16px; }
 
 .group.item-summary {
   height: 64px;
   margin-bottom: 32px; }
 
@@ skipping 136 matching lines @@
   #navbar img {
     height: 16px;
     margin: 0; }
 
 .js #navbar {
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0; }
 
+.site-title {
+  margin: 0;
+  font-size: 17px;
+  line-height: 64px;
+  word-spacing: -2px; }
+
+.site-title a {
+  color: #161616;
+  text-decoration: none;
+  font-weight: 300; }
+
+.site-title a strong {
+  font-weight: 400; }
+
 @media (min-width: 1200px) {
-  html[dir="rtl"] #navbar-logo {
+  html[dir="rtl"] .site-title {
     margin-right: 208px; }
-  html[dir="ltr"] #navbar-logo {
+  html[dir="ltr"] .site-title {
     margin-left: 208px; } }
 
 @media (max-width: 1199px) {
   .js #navbar {
     display: none; } }
 
 #sidebar {
   text-transform: uppercase;
   color: #FFFFFF;
   background-color: #161616;
   font-size: 16px;
   font-weight: 400;
   line-height: 100%; }
   #sidebar ul,
   #sidebar li {
     margin: 0;
     padding: 0;
     text-align: inherit; }
-  #sidebar a,
-  #sidebar a:hover,
-  #sidebar a:active {
-    display: block;
-    text-decoration: none;
-    color: inherit; }
   #sidebar #sidebar-brand {
     height: 64px;
     line-height: 64px; }
   #sidebar #sidebar-logo {
     display: block;
     padding: 0 32px;
     text-align: inherit;
     background-color: #8CC63E; }
     #sidebar #sidebar-logo img {
       width: 32px;
       height: 32px;
       vertical-align: middle; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
-  #sidebar #sidebar-title {
+  #sidebar .site-title {
     display: none; }
   #sidebar #sidebar-close img {
     width: 20px;
     height: 20px; }
   #sidebar #sidebar-open img {
     width: 36px;
     height: 18px; }
+
+#sidebar-menus a,
+#sidebar-menus a:hover,
+#sidebar-menus a:active {
+  display: block;
+  text-decoration: none;
+  color: inherit; }
 
 @media (min-width: 1200px) {
   #sidebar {
     position: absolute;
     top: 0;
     width: 208px; }
   .js #sidebar {
     position: fixed;
     z-index: 2;
     height: 100%; }
@@ skipping 12 matching lines @@
     left: 0;
     overflow: hidden;
     width: 100%;
     height: 64px; }
   .js #sidebar.open {
     height: 100%; }
   html[dir="ltr"].js #sidebar {
     text-align: left; }
   html[dir="rtl"].js #sidebar {
     text-align: right; }
-  #sidebar #sidebar-title,
+  #sidebar .site-title,
   #sidebar #sidebar-open {
     display: block; }
   #sidebar.open #sidebar-open {
     display: none; }
   #sidebar.open #sidebar-close {
     display: block; }
   #sidebar #sidebar-brand {
     background-color: #FFFFFF; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
   #sidebar #sidebar-logo,
-  #sidebar #sidebar-title {
+  #sidebar .site-title {
     padding: 0 16px; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
-  #sidebar #sidebar-title {
+  #sidebar .site-title {
     height: 64px;
     line-height: 64px; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close {
     width: 64px;
     min-width: 64px;
     margin: 0;
     color: #FFFFFF;
     border: none;
     background-color: #161616;
     font-size: 32px; }
-  #sidebar #sidebar-title img {
-    display: inline-block;
-    height: 16px;
-    vertical-align: middle; }
   html[dir="ltr"] #sidebar-open,
   html[dir="ltr"] #sidebar-close,
   html[dir="ltr"] #sidebar-logo,
-  html[dir="ltr"] #sidebar-title {
+  html[dir="ltr"] #sidebar .site-title {
     float: left; }
   html[dir="rtl"] #sidebar-open,
   html[dir="rtl"] #sidebar-close,
   html[dir="rtl"] #sidebar-logo,
-  html[dir="rtl"] #sidebar-title {
+  html[dir="rtl"] #sidebar .site-title {
     float: right; } }
 
 #primary-navigation li {
   position: relative; }
 
 #primary-navigation ul ul li {
   color: #8CC63E;
   font-size: 14px; }
 
 #primary-navigation .active > a {
@@ skipping 196 matching lines @@
     height: 0;
     content: " ";
     border-top: 2px solid #FFFFFF; }
   #footer a {
     color: #FFFFFF; }
   #footer a:hover {
     text-decoration: underline;
     color: #8CC63E !important; }
   #footer p {
     color: #E1E1E1; }