fix: mobile horizontal scroll (shyamtawli#111)

* fix: responsive
bkpecho · May 6, 2023 · b44c618 · b44c618
1 parent d523a6f
commit b44c618
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css
@@ -43,14 +43,13 @@
   display: flex;
   gap: 1rem;
   height: 35px;
-  overflow-x: scroll;
-  scroll-behavior: smooth;
+  overflow: hidden;
 }
 
-/* .skills-container:hover {
+.skills-container:hover {
   overflow-x: scroll;
   scroll-behavior: auto;
-} */
+}
 
 .skills-container::-webkit-scrollbar {
   width: 10px;
@@ -72,7 +71,7 @@
   border-radius: 5px;
   font-size: 0.875rem;
   white-space: nowrap;
-  height: 2rem;
+  height: 30px;
   cursor: default;
 }
 
@@ -103,3 +102,9 @@
   text-decoration: none;
   color: #fff;
 }
+
+@media (max-width: 480px) {
+  .skills-container .skill {
+    height: 2rem;
+  }
+}