Added media queries

atharva-kakarot · Sep 14, 2024 · 4de608c · 4de608c
1 parent 37eb482
commit 4de608c
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 40 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/components/Jumbotron/Jumbotron.css b/src/components/Jumbotron/Jumbotron.css
@@ -57,11 +57,19 @@
 }
 
 @media screen and (max-width: 981px) {
-  .jumbotron {
+  #jumbotron-div {
     position: fixed;
     left: 0;
     right: 0;
+    top: 0;
+    bottom: 0;
     margin: auto;
+    width: 100vw;
+    height: 100%;
+  }
+
+  .jumbotron {
+    position: relative;
   }
 
   #outermost-text-div {
@@ -86,4 +94,22 @@
   .lead {
     font-size: 1em;
   }
+
+  #know-more-btn {
+    font-size: 1em;
+  }
+}
+
+@media screen and (max-width: 981px) and (orientation: landscape) {
+  #jumbotron-div {
+    height: 100%;
+    width: 100%;
+    overflow: scroll;
+  }
+
+  .jumbotron {
+    position: relative;
+    margin-top: 15%;
+  }
+
 }
diff --git a/src/components/Jumbotron/Jumbotron.tsx b/src/components/Jumbotron/Jumbotron.tsx
@@ -4,42 +4,44 @@ import "@fortawesome/fontawesome-free/css/all.min.css";
 
 const Jumbotron: React.FC = () => {
   return (
-    <div className="jumbotron">
-      <div id="outermost-text-div">
-        <div id="text-div">
-          <h1 className="display-4">
-            Hi! I'm{" "}
-            <small
-              style={{
-                display: "inline",
-                color: "lime",
-                fontSize: "1.04em",
-              }}
-            >
-              Atharva
-            </small>
-            .
-          </h1>
-          <p className="lead">
-            I am an aspiring Web Developer looking for opportunities to showcase
-            and further develop my skills!
-          </p>
-          <p className="lead">
-            <a
-              className="btn btn-primary btn"
-              id="know-more-btn"
-              href={"https://www.linkedin.com/in/Atharva-Karanjekar"}
-              target={"_blank"}
-              role="button"
-            >
-              Know more
-            </a>
-          </p>
+    <div id="jumbotron-div">
+      <div className="jumbotron">
+        <div id="outermost-text-div">
+          <div id="text-div">
+            <h1 className="display-4">
+              Hi! I'm{" "}
+              <small
+                style={{
+                  display: "inline",
+                  color: "lime",
+                  fontSize: "1.04em",
+                }}
+              >
+                Atharva
+              </small>
+              .
+            </h1>
+            <p className="lead">
+              I am an aspiring Web Developer looking for opportunities to
+              showcase and further develop my skills!
+            </p>
+            <p className="lead">
+              <a
+                className="btn btn-primary btn"
+                id="know-more-btn"
+                href={"https://www.linkedin.com/in/Atharva-Karanjekar"}
+                target={"_blank"}
+                role="button"
+              >
+                Know more
+              </a>
+            </p>
+          </div>
+          <img
+            src={"src/components/Jumbotron/img/profilepic.png"}
+            id="profile-img"
+          />
         </div>
-        <img
-          src={"src/components/Jumbotron/img/profilepic.png"}
-          id="profile-img"
-        />
       </div>
     </div>
   );

diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css
@@ -1,7 +1,4 @@
 .card-img {
-    /* border: 1px solid white; */
-    /* width: 100%; */
-    /* height: 500%; */
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
 }
@@ -23,7 +20,6 @@
 }
 
 .project-card-body {
-    /* border: 1px solid white; */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -75,4 +71,32 @@
 #view-more:hover {
     color: #ef76ff;
     text-decoration: underline;
+}
+
+@media screen and (max-width: 981px){
+    #project-cards-div {
+        font-size: 0.8em;
+        flex-direction: column;
+        margin-top: 15%;
+    }
+
+    .project-card-title {
+        font-size: 1.5em;
+    }
+
+    .project-card {
+        width: 80%;
+    }
+
+    .project-button {
+        padding-left: 5px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    #view-more {
+        margin: 10px 0px;
+        margin-bottom: 25px;
+    }
+
 }
diff --git a/src/components/Skills/Skills.css b/src/components/Skills/Skills.css
@@ -13,6 +13,7 @@
     justify-content: center;
     height: fit-content;
     margin-top: 7%;
+    margin-bottom: 1%;
 }
 
 .card {