Make the hosted page responsive based on min-width rather than pixel density.

[skeletonkey.git] / hosted.css

diff --git a/hosted.css b/hosted.css
index 80dc4d83bf7de4809e04bbee892fe6bf3f641a15..5e107cb13f8a0e41477239b45e5240117b8fcb78 100644 (file)
--- 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 {