styling for expertise page done for mobile screen widths

src/components/Technologies.jsx

@@ -11,6 +11,7 @@ function Technologies() {
     {techData.map((data) => {
       return (
         <div key={data.Name} className="experienceInnerContainer">
+          <div className="experienceItemContainer">
           <h3 className="experienceItemTitle">{data.Name}</h3>
           <ul className="experienceList">
           {data.List.map((item) => {
@@ -20,6 +21,7 @@ function Technologies() {
           })}
           </ul>
           </div>
+        </div>
       );
   })}
     </section>

src/styles/technologies.css

@@ -5,6 +5,7 @@
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
+  height: 100%;
   gap: 3rem;
   padding: 3rem;
 }
@@ -17,19 +18,25 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 2rem;
+  justify-content: center;
 }
 
 .experienceInnerContainer {
+  margin: 1.5rem;
+  flex: 0 1 27%;
+}
+
+.experienceItemContainer {
   border: 1px solid white;
-  padding: 1rem;
+  padding: 1rem 2rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  height: 100%
 }
 
 .experienceItemTitle {
-  text-align: center; 
+  text-align: left; 
   white-space: nowrap;
   font-size: 2rem;
 }
@@ -41,3 +48,59 @@
 .experienceListItem {
   font-size: 1.5rem;
 }
+
+
+@media screen and (max-width: 1000px) {
+  .experienceInnerContainer {
+    flex: 0 1 37%;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .experienceInnerContainer {
+    flex: 0 1 43%;
+  }
+}
+
+@media screen and (max-width: 675px) {
+  .technologiesContainer {
+    gap: 1rem;
+  }
+  .experienceTitle {
+    font-size: 2.5rem;
+    padding-top: 2rem;
+  }
+  .experienceContainer { 
+    overflow-y: scroll;
+  }
+  .experienceInnerContainer {
+    justify-content: center;
+    flex: 0 1 65%;
+  }
+  .experienceItemTitle {
+    text-align: center; 
+    white-space: nowrap;
+    font-size: 1.7rem;
+  }  
+  .experienceListItem {
+    font-size: 1.2rem;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .technologiesContainer {
+    gap: 1rem;
+  }
+  .experienceTitle {
+    font-size: 2rem;
+    padding-top: 1.5rem;
+  }
+  .experienceContainer { 
+    overflow-y: scroll;
+  }
+  .experienceInnerContainer {
+    justify-content: center;
+    flex: 1
+  }
+}
+