added responsive styles

kate-lobatenko · kate-lobatenko · commit 4996d6e9a182 · 2019-03-12T18:03:33.000+02:00
diff --git a/app.js b/app.js
@@ -14,7 +14,7 @@ class Game {
     drawSquare(arr) {
         let htmlData = `
         <h1>15 puzzle</h1>
-        <table class="square-wrapper"><tr>`;
+        <table class="square-wrapper"><tbody><tr>`;
 
         for (let i = 0; i < arr.length; i++) {
             if (arr[i] !== null) {
@@ -24,7 +24,7 @@ class Game {
             }
         }
 
-        htmlData += `</tr></table>`;
+        htmlData += `</tr></tbody></table>`;
 
         return this.data.innerHTML = htmlData;
     }
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Puzzle 15</title>
   <link rel="icon" type="image/x-icon" href="img/favicon.ico">
   <link rel="apple-touch-icon-precomposed" href="img/little-penguin-152-27563.png">
diff --git a/styles.css b/styles.css
@@ -67,6 +67,7 @@ td.cell {
   box-sizing: border-box;
   height: 114px;
   padding: 12px 15px;
+  font-size: 40px;
 }
 
 .cell:hover {
@@ -84,4 +85,25 @@ td.cell {
 
 .no-events {
   pointer-events: none;
+}
+
+
+@media (max-width: 600px) {
+  div.container {
+    width: 100%;
+  }
+
+  .square-wrapper {
+    max-width: 100vw;
+    max-height: unset;
+    height: 100vw;
+  }
+
+  td.cell {
+    line-height: 22vw;
+    height: 22vw;
+    font-size: 10vw;
+    padding: 0;
+    margin: 2px;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ class Game {`
`14`	`14`	`drawSquare(arr) {`
`15`	`15`	let htmlData = `
`16`	`16`	`<h1>15 puzzle</h1>`
`17`		- <table class="square-wrapper"><tr>`;
	`17`	+ <table class="square-wrapper"><tbody><tr>`;
`18`	`18`
`19`	`19`	`for (let i = 0; i < arr.length; i++) {`
`20`	`20`	`if (arr[i] !== null) {`
`@@ -24,7 +24,7 @@ class Game {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
`27`		- htmlData += `</tr></table>`;
	`27`	+ htmlData += `</tr></tbody></table>`;
`28`	`28`
`29`	`29`	`return this.data.innerHTML = htmlData;`
`30`	`30`	`}`