Fixed text overlap issue on small screens

jainaryan04 · Oct 19, 2024 · 64b407a · 64b407a
1 parent b6ed0f5
commit 64b407a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
@@ -1,8 +1,7 @@
-
-import bgpic from "../../assets/img/abt1.jpg";
+'use client';
+import bgpic from '../../assets/img/abt1.jpg';
 import React, { useEffect } from 'react';
 
-
 export default function About() {
   useEffect(() => {
     window.scrollTo(0, 0);

diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
@@ -20,7 +20,7 @@ const Navbar = () => {
     { name: 'BOARDGAMES', path: '/boardgame' },
     { name: 'MEMBERSHIP', path: '/membership' }, // Add Membership here
   ];
-  
+
   useEffect(() => {
     setToken(Cookies.get('authToken'));
   });
@@ -107,7 +107,7 @@ const Navbar = () => {
             </ul>
           </div>
 
-          <div className="hidden md:flex font-semibold Poppins text-lg">
+          <div className="hidden md:flex font-semibold Poppins text-lg hover:bg-lime-200">
             {token ? (
               <button
                 className={`${baseTextColorClass} ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] font-semibold text-[#323232]`}

diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
@@ -39,7 +39,7 @@ function Landing() {
         <div className="flex-col md:flex pt-20 z-1">
           {/* Text Content */}
           <div className="p-4 md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
-            <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
+            <h1 className="text-5xl md:text-9xl font-bold ml-4" ref={textRef}>
               A unique café experience awaits you
             </h1>
           </div>

diff --git a/package-lock.json b/package-lock.json