css changes

Learn-React-With-Harshi · Feb 2, 2023 · cfe4194 · cfe4194
1 parent 03ecd0f
commit cfe4194
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/index.css b/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .container {
-  @apply mt-24 min-h-screen;
+  @apply mt-24 min-h-[77vh];
 }
 
 .card-container {

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -4,9 +4,9 @@ import { UserContext } from "../utils/UserContext";
 export const Footer = () => {
   const {user} = useContext(UserContext);
   return (
-    <div className="flex justify-around w-full shadow h-14 bg-yellow text-blue-dark text-center leading-[3.5rem]">
-      <span className="text-left">Hey  {user.name}....  Thanks for using Insta Food <span className="text-red">&#x2764;</span> </span>
-      <span className="text-center">Developed with <span className="text-red">&#x2764;</span> by Harshitha</span>
+    <div className="flex mob:flex-col justify-around w-full shadow h-14 bg-yellow text-blue-dark text-center leading-[3.5rem]">
+      <span className="text-left mob:text-xs mob:text-center">Hey  {user.name}....  Thanks for using Insta Food <span className="text-red">&#x2764;</span> </span>
+      <span className="text-center mob:text-xs">Developed with <span className="text-red">&#x2764;</span> by Harshitha</span>
     </div>
   )
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,12 +1,12 @@
 /** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   content: [ "./src/**/*.{html,js}"],
   theme: {
     screens: {
       "mob" : { max: "428px" },
-      "xsm" : { max : "640px"},
-      "sm"  : { max : "768px" },
-      "md"  : { max : "1024px" }
+      ...defaultTheme.screens,
 
     },
     extend: {