feat: make website repsonsive

Sameerkash · Apr 7, 2021 · 9993ab1 · 9993ab1
1 parent 2567af3
commit 9993ab1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/pages/Landing/Landing.js b/src/pages/Landing/Landing.js
@@ -28,15 +28,15 @@ const Landing = () => {
       {/* Hero */}
       <section className="container h-screen mx-auto flex">
         <div className="flex flex-col mx-auto justify-center p-6 text-center">
-          <p className="my-8 text-2xl font-medium">Introducing</p>
-          <h1 className="text-9xl font-bold">toTooooDoooo</h1>
-          <p className="my-8 text-2xl font-medium">
+          <p className="my-8 text-xl md:text-2xl lg:text-3xl font-medium">Introducing</p>
+          <h1 className="text-4xl md:text-7xl lg:text-9xl font-bold">toTooooDoooo</h1>
+          <p className="my-8 text-xl md:text-2xl lg:text-3xl font-medium">
             A Simple To-do App built with {appwrite(8)} Appwrite and {react(8)}{" "}
             React
           </p>
           <button
             onClick={handleClick}
-            className="mx-auto mt-4 py-5 px-24 font-semibold text-2xl rounded-lg shadow-md bg-white text-gray-900 border border-gray-900 hover:border-transparent hover:text-white hover:bg-gray-900 focus:outline-none"
+            className="mx-auto mt-4 py-3 lg:py-5 px-10 lg:px-24 text-lg md:text-2xl font-semibold  rounded-lg shadow-md bg-white text-gray-900 border border-gray-900 hover:border-transparent hover:text-white hover:bg-gray-900 focus:outline-none"
           >
             Get Started
           </button>

diff --git a/src/pages/Todo/Todo.js b/src/pages/Todo/Todo.js
@@ -48,7 +48,7 @@ const Todo = ({ user, dispatch }) => {
       <section className="container h-screen max-h-screen px-3 max-w-xl mx-auto flex flex-col">
         {isError && <Alert color="red" message="Something went wrong..." />}
         <div className="my-auto p-16 rounded-lg text-center">
-          <div className="font-bold text-6xl">
+          <div className="font-bold text-3xl md:text-5xl lg:text-6xl">
             📝 <br /> &nbsp; toTooooDoooos
           </div>