more responiveness

7 years ago · 23bcf02c35
parent 4ad6f6b195
commit 23bcf02c35
2 changed files with 55 additions and 1 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/04/index.html
+++ b/04/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="width=device-width, user-scalable=no" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>A bed, a chair and a table – Special Issue 4</title>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
@ -106,7 +107,6 @@ margin-bottom: 50px;
    overflow: scroll;


-
 }
 #infocontainer::-webkit-scrollbar {
  display: none;
@ -153,7 +153,61 @@ left:-80%;
 width:260%;
 height: 250vh;
 }
+@media screen and (max-width: 980px) {
+
+  #infocontainer .flowtext{
+
+    column-count: 2;
+
+
+  }
+
+}
+
+@media screen and (max-width: 680px) {
+  h1{
+    margin-top: 10px;
+    font-family: LibreBaskerville-Regular,serif;
+    font-size: 65px;
+    text-transform:uppercase;
+    font-weight: normal;
+    letter-spacing: 15px;
+  }

+  h2{
+  font-family: LibreBaskerville-Regular,serif;
+    font-size: 20px;
+    font-weight: normal;
+    margin-top: -40px;
+  }
+  #infocontainer{
+    cursor: move;
+      position: fixed;
+      margin-top: 4%;
+      margin-left: 4%;
+      width:85%;
+      height:auto;
+      background: black;
+      overflow: scroll;
+
+
+  }
+  #containment-wrapper{
+  position: fixed;
+  top:-200vh;
+  left:-200%;
+  width:500%;
+  height: 500vh;
+  }
+  #infocontainer .flowtext{
+
+    column-count: 1;
+
+
+  }
+
+
+}

 </style>
 </head>