style: 작은 모바일 기기에서 GuestBookCard 깨지는 현상 해결

KNU-Design-Web · Oct 30, 2024 · 444a2ba · 444a2ba
1 parent e9cc6c8
commit 444a2ba
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/apps/styles/breakpoint.ts b/src/apps/styles/breakpoint.ts
@@ -1,4 +1,5 @@
 export const BREAKPOINT = {
     TABLET: `@media screen and (min-width: 768px) and (max-width: 1024px)`,
     MOBILE: `@media screen and (max-width: 767px)`,
+    MOBILE_SMALL: `@media screen and (max-width: 576px)`,
 };
diff --git a/src/components/GuestBookPage/GuestBookCard/GuestBookCardContainer.style.ts b/src/components/GuestBookPage/GuestBookCard/GuestBookCardContainer.style.ts
@@ -11,4 +11,7 @@ export const Container = styled.div`
     ${BREAKPOINT.MOBILE} {
         grid-template-columns: repeat(2, 1fr);
     }
+    ${BREAKPOINT.MOBILE_SMALL} {
+        grid-template-columns: repeat(1, 1fr);
+    }
 `;