feat: 모바일반응형 (#87)

bo-an-bo · Jun 8, 2024 · 1b10500 · 1b10500
1 parent 1c4d2ec
commit 1b10500
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/Components/Main/GuideMain.js b/src/Components/Main/GuideMain.js
@@ -112,10 +112,12 @@ const MainTitleText = styled(TitleText)`
     font-size: 1.5rem;
     justify-content: left;
     padding-right: 40%;
+    padding-left: 3%;
 
     @media (max-width: 768px) {
-        font-size: 1.2rem;
+        font-size: 1.1rem;
         padding-right: 30%;
+        padding-left: 3%;
 
     }
 `

diff --git a/src/Components/Main/MainStyle.js b/src/Components/Main/MainStyle.js
@@ -36,14 +36,15 @@ export const Image = styled.img`
     align-self: center;
     margin-bottom: 20px;
     box-shadow: 0 0 3vh rgba(0, 0, 0, 0.3);
-    border-radius: 3vh;
+    border-radius: 1.2vh;
     width: fit-content;
 
     @media (max-width: 768px) {
-        height: 30vh;
         border-radius: 1.5vh;
         align-items: center;
         justify-content: center;
+        max-width: 100%; /* Ensures the image does not exceed the container width */
+        height: auto; /* Maintains the aspect ratio */
     }
 `
 
@@ -116,9 +117,10 @@ export const VerticalImage = styled.img`
     margin-bottom: 20px;
     gap: 10px;
     box-shadow: 0 0 3vh rgba(0, 0, 0, 0.3);
-    border-radius: 3vh;
+    border-radius: 1.2vh;
     @media (max-width: 768px) {
-        height: 20vh;
+        height: auto;
+        width: 100%; /* Ensures the image does not exceed the container width */
         border-radius: 1.5vh;
     }
 `