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

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: Refactor and use .section Created July 5, 2017, 10:52 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/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;

Powered by Google App Engine
This is Rietveld