feat: 「評価を見る」画面のレスポンシブ対応完了

- 前回できなくてヘルプを出した箇所が修正できた - タグのデザインが全然figmaと違っていたことに今更気づき修正
SystemEngineeringTeam · Nov 18, 2024 · dbbe9f2 · dbbe9f2
1 parent 3232357
commit dbbe9f2
Showing 1 changed file with 35 additions and 15 deletions.
diff --git a/src/app/(use-header)/mypage/_components/view/Page/index.module.scss b/src/app/(use-header)/mypage/_components/view/Page/index.module.scss
@@ -6,7 +6,7 @@
   gap: 25px;
 
   .container {
-    padding: 15px min(50px, 7%);
+    padding: min(15px, 2.5%) min(50px, 5%);
     border: solid 1.5px #333; /*線の種類・太さ・色*/
     width: 95%;
     max-width: 800px;
@@ -20,9 +20,9 @@
       display: flex;
       justify-content: start;
       p {
-        padding: 0.5px 15px;
-        border: solid 2px #333; /*線の種類・太さ・色*/
-        border-radius: 10px; /*角の丸み*/
+        padding: 0.5px min(15px, 3%);
+        background-color: #e3e3e3;
+        border-radius: 6px;
       }
     }
 
@@ -41,7 +41,7 @@
     }
     .kuso_box {
       position: relative;
-      width: 225px; 
+      width: 225px;
       height: 35px;
       img {
         position: absolute;
@@ -59,17 +59,37 @@
   }
 }
 
-@media screen and (max-width: 650px) {
-  .score_box {
-    p{
-      padding-top: 0px;
-    }
-  }
+@media (max-width: 540px) {
+  .containers {
+    .container {
+      h1 {
+        font-size: $font-size-md;
+      }
+
+      p {
+        font-size: $font-size-sm;
+      }
+
+      summary {
+        font-size: $font-size-sm;
+      }
 
-  .kuso_box {
-    width: 150px;
-    img {
-      width: 150px;
+      span {
+        font-size: $font-size-sm;
+      }
+
+      .score_box {
+        p {
+          padding-top: 0px;
+        }
+      }
+
+      .kuso_box {
+        width: 150px;
+        img {
+          width: 150px;
+        }
+      }
     }
   }
 }