public/css/chat.css

@@ -103,7 +103,7 @@
     white-space: pre;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #chat {
         flex-flow: column-reverse;
         border-top: #7d7d7d solid 2px;

public/css/components.css

@@ -101,7 +101,7 @@ main {
     height: calc(100% - 50px);
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #main {
         display: grid;
         grid-template-columns: unset;

public/css/game.css

@@ -28,7 +28,7 @@
     background-color: #FFDDA1;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #game {
         height: auto;
         width: auto;

public/css/header.css

@@ -45,7 +45,7 @@ header {
     flex-direction: column;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     header {
         height: 5em;
 

public/css/index.css

@@ -54,7 +54,7 @@
     color: #ffffff;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #login {
         align-items: flex-start;
     }

public/js/game.js

@@ -192,6 +192,8 @@ function start_game() {
     });
 
     socket.on('card', function (data) {
+        if (show_card === true) card.destroyCard();
+
         card = new Card(game_board_size, data.card.question, data.card['answers'][0], data.card['answers'][1], data.card['answers'][2], data.card['answers'][3], data.card['difficulty'], data.username === username);
         card.showCard();
         show_card = true;