Responsiveness and style fix (#34)

* room page responsiveness #23 * fix: responsiveness fixes
avinashcodelabs · Sep 25, 2023 · b8ad8cb · b8ad8cb
1 parent 899a1fd
commit b8ad8cb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/components/deck.js b/src/components/deck.js
@@ -7,7 +7,7 @@ const Deck = ({ onVote, users, userName }) => {
 
   const fibonacciNumbers = generateFibonacciSeries();
   return (
-    <div className="join flex gap-4 p-2 flex-1 justify-center items-center">
+    <div className="join flex gap-4 p-2 flex-1 justify-center items-center flex-wrap">
       {fibonacciNumbers.map((number, index) => (
         <VoteCard onVote={onVote} number={number} key={index}></VoteCard>
       ))}

diff --git a/src/components/pages/landingPage.js b/src/components/pages/landingPage.js
@@ -11,24 +11,25 @@ export default function LandingPage({
 }) {
   return (
     <main className="mx-8">
-      <div className="container mx-auto flex p-5 md:p-0 lg:p-0 items-center">
+      <div
+        className="container mx-auto flex p-5 md:p-0 lg:p-0 justify-center"
+        style={{ height: `calc(100vh - 82px)` }}
+      >
         <div className="flex-1 flex relative z-10">
           <div className="flex flex-col gap-2 max-w-sm lg:max-w-lg flex-1">
-            <h1 className="font-bold text-5xl text-primary mt-12 mb-6">
+            <h1 className="font-bold text-3xl md:text-5xl text-primary  md:mt-12 md:mb-6">
               Play Your Cards Right with Planning Poker!
             </h1>
-            <div className="hidden md:block py-6 text-lg">
+            <div className="md:block py-6 text-lg">
               <p>Simplify Estimations Effortlessly!</p>
               <p>
                 Our
-                <span className="underline decoration-wavy decoration-rose-500 mx-1">
-                  Free,
-                </span>
-                <span className="underline decoration-wavy decoration-yellow-500 me-1">
+                <span className="font-bold text-green-400 mx-1">Free,</span>
+                <span className="font-bold text-green-400 me-1">
                   No-Sign-In,
                 </span>
                 Open-Source App Ensures Ultimate
-                <span className="underline decoration-wavy decoration-green-500 mx-1">
+                <span className="font-bold text-green-400 mx-1">
                   Data Privacy.
                 </span>
                 Intuitive and Hassle-Free