mobile size tests

11 months ago · 8baf25033e
2 changed files with 23 additions and 21 deletions
--- a/index.html
+++ b/index.html
@ -10,6 +10,7 @@
 <body>

 <div id="topBar" class="hBar">
+    top bar things go here
 </div>

 <div id="centerRow">
@ -28,15 +29,13 @@
        <button>$</button>
        <button>%</button>
    </div>
-
+    </div>
    <div id="botBar" class="hBar">
        <a href="https://git.andrewzah.com/dolsen/chordia/" target="_blank">© 2021 chordia.io</a>
        <a href="https://itch.io/jam/top-jam-1" target="_blank">TOP Jam-1</a>
        <a href="about.html">About</a>
        <a href="index.html" class="currentPage">Chordia</a>
    </div>
-
-    </div>
 </body>

 <script src="game.js"></script>
--- a/main.css
+++ b/main.css
@ -1,5 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');

+html {
+    height: 100%;
+}
+
 body {
    margin: 0;
    padding: 0;
@ -7,32 +11,20 @@ body {

    background-color: black;
    font-family: 'Roboto Mono', monospace;
-
    color: white;
+    height: 100%;
 }

 a {
    color: white;
 }

-
-div#centerRow {
-    position: absolute;
-    top: 60px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    flex-flow: row;
-    height: ;
-}
-
 div.hBar {
 }

 div.vBar {
    display: block;
    position: relative;
-    height: 600px;
    border-style: solid;
    border-width: 1px;
    border-color: aqua;
@ -41,7 +33,7 @@ div.vBar {

 div#topBar {
    top: 0px;
-    height: 60px;
+    height: 5%;
 }

 div#leftBar {
@ -61,12 +53,13 @@ div#rightBar {
 div#botBar {
    display: flex;
    flex-flow: row-reverse;
-    position: absolute;
+    position: relative;
    border-style: solid;
    border-color: aqua;
    border-width: 0px;
-    top: 600px;
-    width: 1280px;
+    top: 90%;
+    height: 5%;
+    width: 100%;
    vertical-align: middle;
 }

@ -76,7 +69,7 @@ div#botBar a {
    border-width: 1px;
    text-decoration: none;
    padding-left: 8px;
-    padding-right: 8px;
+    padding-right: 8px;70
    padding-top: 4px;
    padding-bottom: 4px;
 }
@ -99,6 +92,16 @@ p > b {
    color: black;
 }

+div#centerRow {
+    position: absolute;
+    top: 5%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-flow: row;
+    height: 70%;
+}
+
 gamewindow {
    position: relative;
    display: inline;