Few Changes to Make Mobile Responsive

Sahan-Daksh · Aug 5, 2024 · d133376 · d133376
1 parent 5930eae
commit d133376
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/src/assets/styles/pages/layouts/About.css b/src/assets/styles/pages/layouts/About.css
@@ -111,8 +111,30 @@
   }
 
 
+
   .text-left,
   .text-right {
-    text-align: center;
+    text-align: right;
   }
-}
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .mobile-text {
+    padding: 1.5rem;
+    /* Adjust padding for mobile */
+    /* Semi-transparent background for better readability */
+    /* Rounded corners */
+    backdrop-filter: blur(10px);
+    /* Apply blur effect */
+  }
+
+  .second-pg{
+    margin-left:33%;
+  }
+}
+
+@media (min-width: 350px) and (max-width: 768px) {
+  .micromaze-head{
+    font-size: 2rem;
+  }
+}
diff --git a/src/assets/styles/pages/layouts/Hero.css b/src/assets/styles/pages/layouts/Hero.css
@@ -82,10 +82,26 @@ font-style: normal;
   /* Adjusted value to move the image lower */
 }
 
-@media (min-width: 350px) and (max-width: 1200px) {
+@media (min-width: 350px) and (max-width: 480px) {
   .hero-heading {
     position: relative;
-    font-size: 5.5rem;
+    font-size: 6rem;
+    margin-left: -3%;
+  }
+}
+
+@media (min-width: 480px) and (max-width: 640px) {
+  .hero-heading {
+    position: relative;
+    font-size: 7.5rem;
+    margin-left: -3%;
+  }
+}
+
+@media (min-width: 640px) and (max-width: 1024px) {
+  .hero-heading {
+    position: relative;
+    font-size: 9rem;
     margin-left: -3%;
   }
 }
diff --git a/src/pages/layouts/About.jsx b/src/pages/layouts/About.jsx
@@ -20,13 +20,13 @@ const About = () => {
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 1, delay: 0.5 }}
         >
-          <h1> What is MicroMaze?</h1>
+          <h1 className="micromaze-head"> What is MicroMaze?</h1>
         </motion.p>
       </motion.div>
 
       {/* Text Sections */}
       <motion.div
-        className="absolute lg:left-10 top-24 lg:top-40 w-full md:w-1/3 p-4 rounded-lg mobile-text"
+        className="absolute lg:left-10 top-24 lg:top-40 w-full md:w-2/3 lg:w-1/3 md:mt-10 lg:p-4 md:mt-3 rounded-lg mobile-text first-pg"
         initial={{ x: -100, opacity: 0 }}
         animate={{ x: 0, opacity: 1 }}
         transition={{ duration: 1, delay: 1 }}
@@ -40,7 +40,7 @@ const About = () => {
       </motion.div>
 
       <motion.div
-        className="absolute lg:right-10 bottom-24 lg:bottom-40 w-full md:w-1/3 p-4 rounded-lg mobile-text"
+        className="absolute lg:right-10 bottom-24 lg:bottom-40 w-full md:w-2/3 lg:w-1/3 md:mb-5 lg:p-4 rounded-lg mobile-text second-pg"
         initial={{ x: 100, opacity: 0 }}
         animate={{ x: 0, opacity: 1 }}
         transition={{ duration: 1, delay: 1.5 }}