diff options
| author | Zarino Zappia <mail@zarino.co.uk> | 2017-11-07 12:27:15 +0000 |
|---|---|---|
| committer | Zarino Zappia <mail@zarino.co.uk> | 2017-11-07 12:27:15 +0000 |
| commit | 963e4b166600509d5fb5d7266639ed09254f9490 (patch) | |
| tree | 514ba99b448c0fcfda8713863384bc582a9178ac | |
| parent | a26652ec2383d81eb9649e9d5b90485e574ccd55 (diff) | |
Prevent text overflow in homepage stats section
When there are lots of reports on a site, the big numbers on the
homepage would overflow the grid and look messy. This was particularly
noticeable on the fixmystreet.com homepage on 768–1024px screens.
We now scale up the font size more gradually, as the container widens,
and the maximum font size (3em) is slightly lower than before.
Fixes #1722.
| -rw-r--r-- | web/cobrands/sass/_base.scss | 10 | ||||
| -rw-r--r-- | web/cobrands/sass/_layout.scss | 14 |
2 files changed, 15 insertions, 9 deletions
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index b9c666da1..a3861738a 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -2036,11 +2036,11 @@ table.nicetable { size:0.8125em; weight:bold; } - big { - display:block; - margin-bottom:0.5em; - font-size:1.5385em; - } + } + big { + display:block; + margin-bottom:0.5em; + font-size:1.5385em; } } } diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 5a78ff4d5..fce99c3de 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -931,10 +931,16 @@ textarea.form-error { color: #222; border-top:0.25em solid $primary; padding-top:1em; - div { - big { - color: $layout_front_stats_color; - font-size: 3.2308em; + big { + color: $layout_front_stats_color; + font-size: 2em; + @media (min-width: 54em) { + // 54em roughly halfway between 48em and 62em + font-size: 2.5em; + } + @media (min-width: 62em) { + // container max-width 60em + 2em side padding + font-size: 3em; } } } |