responsive coin images

rebeccaui · Sep 16, 2018 · 7fedf6c · 7fedf6c
1 parent d7a36f3
commit 7fedf6c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -38,24 +38,24 @@ body {
 .coinsFlexbox {
     display: flex;
     flex-flow: row wrap;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
-    width: 220px;
+    width: 90% /*220px*/;
     border-style: solid;
     border-color: rgb(240, 229, 82);
     border-width: 10px 10px;
     background-color: white;
     margin: auto auto 20px auto;
 }
 .coinImg {
-    width: 202px;
-    height: 202px;
+    width: 140px;
+    height: 140px;
     margin: auto;
 }
 
-@media(min-width: 576px) {
+@media(min-width: 425px) {
     .coinsFlexbox {
-        flex-flow: row nowrap;
+        flex-flow: row wrap;
         width: 100%;
     }
     .coinImg {
@@ -64,3 +64,5 @@ body {
     }
 }
 
+
+
diff --git a/assets/javascript/game.js b/assets/javascript/game.js
@@ -81,7 +81,7 @@ var gameAudio = new Audio("assets/audio/harrysWondrousWorld.mp3");
     reset();
 
     // Window listens for clicks on any of the coins
-    $(".coinImg").on("click", function() {
+    coins.on("click", function() {
         // The computer listens for which coin was clicked and finds its value
         var chosenCoin = $(this).attr("value");