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) |
juliandoucette
2017/06/16 18:47:53
NIT: I'm guessing you are using max-width to [be c
ire
2017/06/19 11:51:04
I would generally opt for min-width everywhere as
juliandoucette
2017/06/20 16:38:35
You're right.
We should assess changing this sepa
ire
2017/06/22 15:41:44
My initial thought is that it's not worth it. Beca
|
+ { |
+ 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; |