From d64ffb6ffd2c1e26851df5a502d098187722e41c Mon Sep 17 00:00:00 2001
From: Josh Ashton <me@joshashton.dev>
Date: Fri, 17 Jan 2025 01:04:57 +0000
Subject: [PATCH] fixed bug on mobile where skill cards are laid horizontally
 instead of vertically.

---
 src/Home.jsx |  2 +-
 src/main.css | 12 +-----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/Home.jsx b/src/Home.jsx
index 1b39ed65..c5cea31f 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -32,7 +32,7 @@ const Home = ({ image, skills }) => {
           </div>
         </div>
         <div id="skill-cards">
-          <div className="center-row">
+          <div className="center-row" id="skill-cards-colrow">
             <SkillCard
               header="Languages"
               symbol="code"
diff --git a/src/main.css b/src/main.css
index 5bae4aaa..2456ab20 100644
--- a/src/main.css
+++ b/src/main.css
@@ -270,13 +270,6 @@ li {
   width: 100%;
 }
 
-#card-grid {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
 /**SKILL CARDS**/
 .card {
   text-align: center;
@@ -950,11 +943,8 @@ li {
     margin-left: 5vw;
   }
 
-  #card-grid {
-    display: flex;
+  #skill-cards-colrow {
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
   }
 
   .button {