style: breakpoint du widget sur mobile

mission-apprentissage · Nov 25, 2024 · e4ea3dc · e4ea3dc
1 parent d9aeb65
commit e4ea3dc
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/server/src/services/widget/templates/stats/default.1.ejs b/server/src/services/widget/templates/stats/default.1.ejs
@@ -281,14 +281,20 @@
 
     @media screen and (max-width: <%=options.responsiveWidth %>) {
       :root {
-        --body-width: min(calc(var(--widget-width) * 0.8 / <%=maxEleves %>), 30px);
+        --body-width: 50px;
         --body-height: calc(var(--body-width) * 1.8125);
 
         --body-icon-width: calc(var(--body-width) * 0.4);
         --body-icon-left: calc(var(--body-width) * 0.29);
         --body-icon-top: calc(var(--body-width) * 0.5);
       }
 
+
+      .body-group {
+        flex-wrap: wrap;
+        justify-content: normal;
+      }
+
       .bodies {
         display: flex;
         align-items: flex-start;
@@ -333,6 +339,17 @@
         height: 22px;
       }
     }
+
+    @media screen and (max-width: 19em) {
+      :root {
+        --body-width: 30px;
+        --body-height: calc(var(--body-width) * 1.8125);
+
+        --body-icon-width: calc(var(--body-width) * 0.4);
+        --body-icon-left: calc(var(--body-width) * 0.29);
+        --body-icon-top: calc(var(--body-width) * 0.5);
+      }
+    }
   </style>
 </head>