Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/css/main.css

Issue 29438582: Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Created May 16, 2017, 4:26 a.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
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;

Powered by Google App Engine
This is Rietveld