responsive css js memory

SRC/public/css/memory.css

@@ -120,7 +120,7 @@ img {
   margin: 0;
   padding: 0;
   display: inline;
-  margin-top: 0; 
+  margin-top: 0;
 }
 .mg__start-screen--level-select span {
   color: #ff3c50;
@@ -165,7 +165,7 @@ img {
 /* game__level-1 styles */
 .mg__level-1 .mg__tile {
   width: 25%;
-  height: 50%;
+  height: 150px;
 }
 
 .mg__level-1 .mg__tile-1 {
@@ -204,7 +204,9 @@ img {
 /* game__level-2 styles */
 .mg__level-2 .mg__tile {
   width: 16.66667%;
-  height: 33.33333%;
+  /*height: 33.33333%;*/
+  height: 150px;
+
 }
 
 .mg__level-2 .mg__tile-1 {
@@ -283,7 +285,7 @@ img {
 /* game__level-3 styles */
 .mg__level-3 .mg__tile {
   width: 12.5%;
-  height: 25%;
+  height: 150px;
 }
 
 .mg__level-3 .mg__tile-1 {

SRC/public/js/memory.js

@@ -302,7 +302,7 @@
       this.newCards.push(this.cards[i], this.cards[i]);
     }
     this.newCards = shuffle(this.newCards);
-    this.tilesHTML = '<tr>';
+    this.tilesHTML = '<div class="col-xs-11 col-sm-10 col-lg-12">';
     for ( var i = 0; i < this.numTiles; i++  ) {
       var n = i + 1;
       this.tilesHTML += '<div class="mg__tile mg__tile-' + n + '">\
@@ -316,7 +316,7 @@
         }*/
 
     }
-    this.tilesHTML +="</tr>";
+    this.tilesHTML +="</div>";
     this.gameContents.innerHTML = this.tilesHTML;
     this.gameState = 2;
     this.options.onGameStart();

SRC/resources/views/one_referent_game.blade.php

@@ -18,9 +18,9 @@
 	<div class="content">
 		<div class="container">
 			<div class="row">
-				<div class="col-xs-10 col-md-12">
+				<!--<div class="col-xs-10 col-md-12">-->
 					<div id="my-memory-game"></div>
-				</div>
+			<!--	</div> -->
 			</div>
 
 		</div>