Unified Diff: static/scss/components/_cards.scss
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: Handle responsive styling
Created June 22, 2017, 3:27 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« pages/tool-certification/index.md ('K')
|
« static/css/main.css ('k')
|
static/scss/components/_columns.scss » ('j')
|
static/scss/components/_columns.scss » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/scss/components/_cards.scss |
| =================================================================== |
| --- a/static/scss/components/_cards.scss |
| +++ b/static/scss/components/_cards.scss |
| @@ -24,42 +24,62 @@ |
| background-color: $primary-bg; |
| } |
| .card %headings |
| { |
| @extend h3; |
| height: $md + $sm; |
| margin: $sm 0 $sm 0; |
| + |
| + @media (max-width: $mobile-breakpoint) |
| + { |
| + height: auto; |
| + } |
| } |
| .card-icon |
| { |
| margin: $sm 0; |
| } |
| .center .card-icon |
| { |
| margin: $lg - $sm 0 $md 0; |
| + |
| + @media (max-width: $tablet-breakpoint) |
| + { |
| + margin-top: $md; |
| + } |
| + @media (max-width: $mobile-breakpoint) |
| + { |
| + margin-top: $sm; |
| + } |
| } |
| img.card-icon, |
| .card-icon img |
| { |
| height: 48px; |
| } |
| .card img.block |
| { |
| margin: 0; |
| } |
| .card-summary { |
| margin: $md 0; |
| height: $lg; |
| + |
| + @media (max-width: $mobile-breakpoint) |
| + { |
| + margin: $sm; |
| + height: auto; |
| + } |
| } |
| // negative margin shrinks containing paragraph margin |
| .card %buttons |
| { |
| display: block; |
| width: 100%; |
| margin-bottom: -$xs; |
« pages/tool-certification/index.md ('K')
|
« static/css/main.css ('k')
|
static/scss/components/_columns.scss » ('j')
|
static/scss/components/_columns.scss » ('J')
