refactor : 석차메모 반응형 구현

2023-Summer-Bootcamp-TeamD · Aug 3, 2023 · dfda71f · dfda71f
1 parent cf3f9b2
commit dfda71f
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/pages/GameResult/index.tsx b/src/pages/GameResult/index.tsx
@@ -246,6 +246,16 @@ const Ranking = styled.div`
   & > img {
     height: 53vh;
   }
+  @media (min-width: 769px) {
+    align-items: center;
+  }
+  @media (max-width: 768px) {
+    padding-top: 6.6rem;
+    width: 35vw;
+    height: 30vh;
+    margin-left: 3rem;
+    background-size: 35vw 30vh;
+  }
 `;
 
 const Medal = styled.img<{ rank: number }>`
@@ -259,6 +269,10 @@ const Medal = styled.img<{ rank: number }>`
       return `content: url(${BronzeMedal});`;
     }
   }}
+  @media (max-width: 768px) {
+    width: 2.3rem;
+    margin-left: 6rem;
+  }
 `;
 
 const UserInRanking = styled.span<{ rank: number }>`
@@ -273,4 +287,7 @@ const UserInRanking = styled.span<{ rank: number }>`
       return '#bc00fe';
     }
   }};
+  @media (max-width: 768px) {
+    font-size: 2.5rem;
+  }
 `;