Screen Css issue at both mobile and desktop view #1494 (#1503)

* Update ButtonGroup.tsx Signed-off-by: Rana Zaeem <[email protected]> * Update GameGrid.tsx Signed-off-by: Rana Zaeem <[email protected]> * Update MultiplayerTicTacToe.tsx Signed-off-by: Rana Zaeem <[email protected]> --------- Signed-off-by: Rana Zaeem <[email protected]>
reactplay · Jun 23, 2024 · 3720403 · 3720403
1 parent 5a404ce
commit 3720403
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
@@ -86,13 +86,13 @@ function MultiplayerTicTacToe(props: any) {
  <>
  <div className="play-details">
  <PlayHeader play={props} />
- <div className="flex justify-center play-details-body">
+ <div className="grid items-center justify-center play-details-body">
  {/* Your Code Starts Here */}
  <div>
  <h1 className="text-2xl text-center md:text-3xl">Multiplayer Tic Tac Toe</h1>
  <ButtonGroup setIsCross={setIsCross} />
 
- <section className="flex items-center justify-center">
+ <section className="flex items-center !justify-center">
  <ToastContainer />
  <main>
  <div>

diff --git a/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx b/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
@@ -11,14 +11,14 @@ export default function ButtonGroup({ setIsCross }: ButtonGroupProps) {
  <>
  <section className="flex justify-center">
  <button
- className="flex justify-center items-center w-28 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
+ className="grid justify-center items-center w-24 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
  onClick={() => setIsCross(true)}
  >
  <span className="hidden">Cross</span>
  <FaTimes className="text-2xl font-extrabold text-red-500" />
  </button>
  <button
- className="flex justify-center items-center w-28 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
+ className="grid justify-center items-center w-24 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
  onClick={() => setIsCross(false)}
  >
  <span className="hidden">Circle</span>

diff --git a/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx b/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
@@ -12,7 +12,7 @@ export default function GameGrid({ changeItem }: GameGrid) {
  <div className="grid grid-cols-3 gap-4">
  {GAME_ARRAY.map((ele, i) => (
  <div
- className="md:w-24 md:h-24 w-32 flex justify-center items-center h-32 bg-[#00f2f2] border-2 border-black rounded-lg cursor-pointer"
+ className="md:h-16 sm:w-44 w-20 gird justify-center items-center h-12  bg-[#00f2f2] border-2 border-black rounded-lg cursor-pointer"
  key={i}
  onClick={() => changeItem(i)}
  >