From af5a1ee8c2533e6924fe7c35dd4ef1931c3742d2 Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Sun, 23 Feb 2014 19:31:36 -0500 Subject: [PATCH] Make the hosted page responsive based on min-width rather than pixel density. --- core.css | 21 +++++++++++++++++++-- hosted.css | 12 ++++++++++-- hosted.html | 2 +- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/core.css b/core.css index fe48e80..341f2ae 100644 --- a/core.css +++ b/core.css @@ -80,8 +80,25 @@ hr { clear: both; } -@media screen and (-webkit-min-device-pixel-ratio: 1.5) { +@media screen and (max-width: 800px) { body { - font-size: 1.1em; + margin: 0; + padding: 0; + width: 90%; + } + + li input { + display: block; + width: 100%; + } + + li label { + text-align: left; + } + + li button { + float: none; + width: 100%; + margin: 0; } } diff --git a/hosted.css b/hosted.css index 80dc4d8..5e107cb 100644 --- a/hosted.css +++ b/hosted.css @@ -54,13 +54,19 @@ iframe { height: 6.25em; } -@media screen and (-webkit-min-device-pixel-ratio: 1.5) { +@media screen and (max-width: 800px) { + html { + padding: 0; + margin: 0; + } + body { background-color: #FFF; + width: 99%; } h1 { - font-size: 4em; + font-size: 1.5em; } p { display: none; @@ -69,6 +75,8 @@ iframe { iframe { width: 100%; border: none; + margin: 0.1em; + overflow: hidden; } #core { diff --git a/hosted.html b/hosted.html index 2c42f9b..47ec475 100644 --- a/hosted.html +++ b/hosted.html @@ -2,7 +2,7 @@ Skeleton Key Hosted - + -- 2.22.5