Added media queries

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

Hide file tree

Showing 2 changed files with 72 additions and 37 deletions.
diff --git a/src/components/Skills/Skills.css b/src/components/Skills/Skills.css
@@ -12,7 +12,7 @@
     align-items: center;
     justify-content: center;
     height: fit-content;
-    margin-top: 4.5%;
+    margin-top: 7%;
 }
 
 .card {
@@ -45,7 +45,7 @@
     margin-bottom: 50px;
 }
 
-.col-6 {
+.row-6 {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -65,7 +65,7 @@
     margin: 10px;
     backdrop-filter: blur(10px);
     border-radius: 20px;
-    width: 100%;
+    width: 55%;
     height: 100%;
     background-color: rgba(135, 207, 235, 0.025);
     transition: 0.5s;
@@ -79,3 +79,36 @@
 .container-fluid {
     width: 85%;
 }
+
+@media screen and (max-width: 981px) {
+    #div {
+        position: fixed;
+        left: 0;
+        right: 0;
+        margin: auto;
+        overflow: scroll;
+        width: 100%;
+        height: 100%;
+    }
+
+    #table-div {
+        margin-top: 15%;
+        margin-bottom: 5%;
+    }
+
+    .skills-outer-div {
+        width: 95%;
+    }
+
+    .skills-header {
+        font-size: 1em;
+    }
+
+    .card-text {
+        font-size: 0.8em;
+    }
+
+    .card-img-top {
+        height: 50px;
+    }
+}
diff --git a/src/components/Skills/Skills.tsx b/src/components/Skills/Skills.tsx
@@ -24,47 +24,49 @@ interface Props {}
 
 const Skills: React.FC = () => {
   return (
-    <div id="table-div">
-      <div className="container-fluid">
-        <div className="row text-center">
-          <div className="col-6">
-            <div className="skills-outer-div">
-              <h1 className="skills-header">Front-End Development:</h1>
-              <div className="skills-div">
-                <Skill image="html5" text="HTML5" />
-                <Skill image="css3" text="CSS3" />
-                <Skill image="javascript" text="JavaScript" />
-                <Skill image="react" text="React" />
+    <div id="div">
+      <div id="table-div">
+        <div className="container-fluid">
+          <div className="row text-center">
+            <div className="row-6">
+              <div className="skills-outer-div">
+                <h1 className="skills-header">Front-End Development:</h1>
+                <div className="skills-div">
+                  <Skill image="html5" text="HTML5" />
+                  <Skill image="css3" text="CSS3" />
+                  <Skill image="javascript" text="JavaScript" />
+                  <Skill image="react" text="React" />
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="col-6">
-            <div className="skills-outer-div">
-              <h1 className="skills-header">Back-End Development:</h1>
-              <div className="skills-div">
-                <Skill image="django" text="Django" />
-                <Skill image="firebase" text="Firebase" />
-                <Skill image="mysql" text="MySQL" />
-                <Skill image="ssms" text="SSMS" />
+            <div className="row-6">
+              <div className="skills-outer-div">
+                <h1 className="skills-header">Back-End Development:</h1>
+                <div className="skills-div">
+                  <Skill image="django" text="Django" />
+                  <Skill image="firebase" text="Firebase" />
+                  <Skill image="mysql" text="MySQL" />
+                  <Skill image="ssms" text="SSMS" />
+                </div>
               </div>
             </div>
-          </div>
-          <div className="col-6">
-            <div className="skills-outer-div">
-              <h1 className="skills-header">Programming Languages:</h1>
-              <div className="skills-div">
-                <Skill image="python" text="Python" />
-                <Skill image="C" text="C" />
-                <Skill image="cpp" text="C++" />
+            <div className="row-6">
+              <div className="skills-outer-div">
+                <h1 className="skills-header">Programming Languages:</h1>
+                <div className="skills-div">
+                  <Skill image="python" text="Python" />
+                  <Skill image="C" text="C" />
+                  <Skill image="cpp" text="C++" />
+                </div>
               </div>
             </div>
-          </div>
-          <div className="col-6">
-            <div className="skills-outer-div">
-              <h1 className="skills-header">Version Control:</h1>
-              <div className="skills-div">
-                <Skill image="git" text="Git" />
+            <div className="row-6">
+              <div className="skills-outer-div">
+                <h1 className="skills-header">Version Control:</h1>
+                <div className="skills-div">
+                  <Skill image="git" text="Git" />
+                </div>
               </div>
             </div>
           </div>