fix: improves top info section in case and on smaller screens

varianter · Dec 12, 2024 · aef68c0 · aef68c0
1 parent 3921e4c
commit aef68c0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
@@ -1,21 +1,18 @@
 .projectInfo {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 1rem;
+  row-gap: 3rem;
   width: 100%;
   max-width: var(--max-content-width-medium);
 
-  @media (max-width: 425px) {
-    flex-direction: column;
-    gap: 3rem;
-  }
+  margin: var(--padding-m) auto;
 }
 
 .projectInfoInner {
   gap: 1.5rem;
   display: flex;
   flex-direction: column;
-  width: 50%;
 }
 
 .badgeWrapper {
@@ -70,7 +67,6 @@
   flex-direction: column;
   gap: 1.5rem;
   flex-wrap: wrap;
-  width: 50%;
 }
 
 .preFancyCharacter {

diff --git a/src/utils/hooks/useScrollDirection.ts b/src/utils/hooks/useScrollDirection.ts
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 
 export default function useScrollDirection() {
   const [scrollDirection, setScrollDirection] = useState<string | null>(null);
-
   useEffect(() => {
     let lastScrollY = window.scrollY;