diff options
| -rw-r--r-- | assets/styles.css | 25 | ||||
| -rw-r--r-- | assets/stylesheets/layout.hcss | 31 | ||||
| -rw-r--r-- | index.html | 3 |
3 files changed, 58 insertions, 1 deletions
diff --git a/assets/styles.css b/assets/styles.css index 54ec607..4e74081 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -137,3 +137,28 @@ ul { color: #c9ccb4; text-shadow: 1px 3px 5px #230f0f; } +@media screen and (max-width: 767px) { + header { + margin-left: -8px; + } + .content { + margin-left: auto; + margin-right: auto; + } +} +@media screen and (max-width: 710px) { + ul { + margin-left: 2.5em; + } +} +@media screen and (max-width: 669px) { + .content { + width: 96%; + } +} +@media screen and (max-width: 481px) { + .buy-button { + position: static; + display: inline-block; + } +} diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss index 9f4259b..755d4fa 100644 --- a/assets/stylesheets/layout.hcss +++ b/assets/stylesheets/layout.hcss @@ -87,3 +87,34 @@ ul { color: LIMEADE; text-shadow: 1px 3px 5px DARK_CHOCOLATE; } + + +@media screen and (max-width: 767px) { + header { + margin-left: -8px; + } + + .content { + margin-left: auto; + margin-right: auto; + } +} + +@media screen and (max-width: 710px) { + ul { + margin-left: 2.5em; + } +} + +@media screen and (max-width: 669px) { + .content { + width: 96%; + } +} + +@media screen and (max-width: 481px) { + .buy-button { + position: static; + display: inline-block; + } +} @@ -45,7 +45,8 @@ <div class="position-relative margin-bottom-0.5"> <h2 class="display-inline-block">Try it free for 30 days</h2> <a href="#" - class="button button-magenta + class="buy-button + button button-magenta padding-top-9 padding-bottom-9 position-absolute right-0 bottom-0"> Buy ($15) |