Responsive Wheel

Simon-Rey · Oct 24, 2024 · 25e762e · 25e762e
1 parent 2838b3e
commit 25e762e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/petitbonhomme/_includes/outfit_display_setup.js b/petitbonhomme/_includes/outfit_display_setup.js
@@ -28,6 +28,8 @@ function setupWheel(outfitStack) {
 
         // Translate items based on calculated x, y positions
         item.style.transform = `translate(${x}px, ${y}px)`;
+        item.style.width = `${imgMaxWidth}px`;;
+        item.style.height = `${imgMaxHeight}px`;
 
         const image = item.querySelector('img');
         image.style.maxHeight = `${imgMaxHeight}px`;

diff --git a/petitbonhomme/assets/css/style.css b/petitbonhomme/assets/css/style.css
@@ -547,6 +547,12 @@ Calendar Page
   justify-content: flex-start;
 }
 
+@media screen and (max-width: 910px) {
+    .outfits-wrap {
+        flex-direction: column;
+    }
+}
+
 .outfit-stack {
   position: relative;
   display: flex;
@@ -582,8 +588,6 @@ Calendar Page
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
-  width: 125px;
-  height: 166px;
   display: flex;
   justify-content: center;
   align-items: center;