UI break fix

Bhavika-Maurya · Jul 23, 2022 · da27553 · da27553
1 parent c365313
commit da27553
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/plays/memory-game/NetlifyCardGame.jsx b/src/plays/memory-game/NetlifyCardGame.jsx
@@ -199,7 +199,7 @@ function NetlifyCardGame(props) {
  How to Play?
  </h2>
  <div className='container'>
- <div className='App'>
+ <div className='game-body'>
  {newImgArray.map((item, idx) => {
  return (
  <div

diff --git a/src/plays/memory-game/NetlifyCardGame.scss b/src/plays/memory-game/NetlifyCardGame.scss
@@ -28,7 +28,7 @@ $memory-game-single-item-hover-bg: url("./question1.png");
  }
 }
 
-.memory-game .container .App {
+.memory-game .container .game-body {
  margin: 5px;
  width: $memory-game-box-width;
  height: calc(90vh - 25px);
@@ -108,7 +108,7 @@ $memory-game-single-item-hover-bg: url("./question1.png");
 }
 
 @media screen and (max-width: 1366px) {
- .memory-game .container .App {
+ .memory-game .container .game-body {
  width: 80vh;
  margin: 5px;
  padding: 10px;
@@ -117,7 +117,7 @@ $memory-game-single-item-hover-bg: url("./question1.png");
 }
 
 @media screen and (min-width: 1600px) {
- .memory-game .container .App {
+ .memory-game .container .game-body {
  width: 80vh;
  height: 70vh;
  margin: 5px;
@@ -127,7 +127,7 @@ $memory-game-single-item-hover-bg: url("./question1.png");
 }
 
 @media screen and (max-width: 768px) {
- .memory-game .container .App {
+ .memory-game .container .game-body {
  margin: 5px;
  width: calc(100vh - 35px);
  height: auto;