From fd1bd6c4aa4c90488c7bad6155258f1db590b18c Mon Sep 17 00:00:00 2001 From: sirgazil Date: Sun, 27 Nov 2016 15:02:18 -0500 Subject: website: style: Fix responsive issues in action links. * website/static/base/css/index.css (.action) (.download): Adapt to small screens. --- website/static/base/css/index.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/website/static/base/css/index.css b/website/static/base/css/index.css index 28db440..ed8ff29 100644 --- a/website/static/base/css/index.css +++ b/website/static/base/css/index.css @@ -1,7 +1,7 @@ /* Public domain 2015 Luis Felipe López Acevedo. All rights waived. - + NOTE The default style is targeted at screens with a width less than 1024 pixels. */ @@ -63,13 +63,13 @@ h3 { border-style: solid; border-width: thin; color: white; - display: inline-block; + display: block; font-size: 14px; height: 47px; line-height: 47px; + margin: 10px; text-align: center; vertical-align: middle; - width: 196px; } .action:active, .action:focus, .action:hover { @@ -81,7 +81,6 @@ h3 { background-image: url("../img/download-btn-bg.png"); background-position: bottom; background-repeat: repeat-x; - margin-right: 20px; } .contribute { @@ -188,6 +187,14 @@ h3 { /* CONTACT BOX */ +@media screen and (min-width: 480px) { + .action, .action:link, .action:visited { + display: inline-block; + width: 196px; + } +} + + @media screen and (min-width: 1024px) { .info-box { vertical-align: top; @@ -208,7 +215,7 @@ h3 { margin: auto; width: 960px; } - + .featured-actions { text-align: right; } -- cgit v1.2.3