make skill section more responsive on user profile, resolved issue #990…

… (#1029) * make skill section on user profile responsive * update * make skill section responsive * update * update * resolve conflit
shyamtawli · Jun 11, 2024 · 8c9c4aa · 8c9c4aa
1 parent 5f38a9d
commit 8c9c4aa
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/ProfilesList.json b/src/ProfilesList.json
@@ -424,4 +424,4 @@
   "Monalisha-Roy.json",
   "Sahilll15.json",
   "Kritika.json"
-]
+]
diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
@@ -49,14 +49,14 @@ function Card({ data }) {
             {data.location}
           </p>
           <div
-            className="skills-container mt-4 flex h-9 gap-4 overflow-hidden hover:overflow-x-scroll hover:scroll-smooth"
+            className="skills-container mt-4 flex h-auto flex-wrap gap-1 overflow-hidden hover:overflow-x-scroll hover:scroll-smooth md:gap-4"
             ref={cardRef}
           >
             {data.skills &&
               data.skills.map((skill, index) => {
                 return (
                   <div
-                    className="inline h-[30px] cursor-default whitespace-nowrap rounded-md bg-secondaryColor px-2 py-1 text-sm text-white"
+                    className="inline h-auto cursor-default whitespace-nowrap rounded-md bg-secondaryColor px-2 py-1 text-[9px] text-white sm:text-sm md:h-[30px]"
                     key={index}
                   >
                     {skill}