fixing the responsiveness for mobile websites

StarKnightt · Sep 19, 2024 · ac159e0 · ac159e0
1 parent 6979af8
commit ac159e0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,46 @@
+@media screen and (max-width: 768px) {
+    html, body {
+      overflow-x: hidden;
+    }
+
+    body {
+      position: relative;
+      width: 100%;
+    }
+
+    .container {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    /* Adjust font sizes for mobile */
+    h1, h2, h3 {
+      font-size: 90%;
+    }
+
+    p, a {
+      font-size: 95%;
+    }
+
+    /* Ensure images don't overflow */
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  /* Specific adjustments for the Hero section */
+  @media screen and (max-width: 640px) {
+    .hero-title {
+      font-size: 2.5rem !important;
+    }
+
+    .hero-subtitle {
+      font-size: 1.25rem !important;
+    }
+
+    .hero-cta {
+      font-size: 1rem !important;
+      padding: 0.5rem 1rem !important;
+    }
+  }
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import Footer from './components/Footer';
 import Loader from './components/Loader';
 import About from './components/About';
 import { motion, AnimatePresence } from 'framer-motion';
+import './App.css'; 
 
 function App() {
   const [loading, setLoading] = useState(true);

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -4,7 +4,6 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 function Hero() {
   const [currentImage, setCurrentImage] = useState(0);
-
   const images = [
     '/images/hero-background.jpg',
     '/images/coffee3.jpg',
@@ -29,7 +28,6 @@ function Hero() {
           filter: 'brightness(0.4)',
         }}
       />
-
       {/* Navigation Arrows */}
       <button
         onClick={prevImage}
@@ -43,21 +41,20 @@ function Hero() {
       >
         <ChevronRight size={24} />
       </button>
-
       <div className="text-center px-4 max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl">
         <motion.h2
           initial={{ y: 50, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.5, duration: 0.8 }}
-          className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-3 sm:mb-4 md:mb-6 text-orange-400 drop-shadow-lg leading-tight"
+          className="hero-title text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-3 sm:mb-4 md:mb-6 text-orange-400 drop-shadow-lg leading-tight"
         >
           Experience Coffee Evolution
         </motion.h2>
         <motion.p
           initial={{ y: 50, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.7, duration: 0.8 }}
-          className="text-lg sm:text-xl md:text-2xl lg:text-3xl mb-5 sm:mb-6 md:mb-8 text-orange-200 drop-shadow-md"
+          className="hero-subtitle text-lg sm:text-xl md:text-2xl lg:text-3xl mb-5 sm:mb-6 md:mb-8 text-orange-200 drop-shadow-md"
         >
           Where science meets flavor
         </motion.p>
@@ -68,7 +65,7 @@ function Hero() {
           transition={{ delay: 0.9, duration: 0.5 }}
           whileHover={{ scale: 1.05, boxShadow: "0 0 25px rgba(249, 115, 22, 0.7)" }}
           whileTap={{ scale: 0.95 }}
-          className="bg-orange-600 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-3 rounded-full text-base sm:text-lg md:text-xl font-semibold hover:bg-orange-700 transition duration-300 inline-block"
+          className="hero-cta bg-orange-600 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-3 rounded-full text-base sm:text-lg md:text-xl font-semibold hover:bg-orange-700 transition duration-300 inline-block"
         >
           Explore Our Innovations
         </motion.a>