++

petitbonhomme/_includes/outfit_display_setup.js

@@ -9,7 +9,12 @@ outfitStacks.forEach((stack) => {
 
 function setupWheel(outfitStack) {
     const wheelItems = outfitStack.querySelectorAll('.outfit-wheel-item-image-wrap');
-    const radius = {{ wheel_radius }};
+    const pageWidth = window.innerWidth;
+    const radius = Math.min(pageWidth / 2, {{ wheel_radius }});
+
+    const wheel = outfitStack.querySelectorAll('.wheel')[0];
+    wheel.style.width = `${2 * radius + 200}px`;
+    wheel.style.height = `${2 * radius + 200}px`;
 
     // Position the items in a circle around the center of the wheel
     const angleStep = (2 * Math.PI) / wheelItems.length; // Divide the circle by the number of items

petitbonhomme/assets/css/style.css

@@ -362,10 +362,10 @@ Index Page
 #latest-items {
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: space-evenly;
     gap: 20px;
     flex-wrap: wrap;
-    margin: 20px auto;
+    width: 100%;
 }
 
 #latest-items div {
@@ -543,8 +543,6 @@ Calendar Page
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 600px; /* Size of the wheel */
-  height: 600px;
   transform: translate(-50%, -50%);
   background-color: rgba(255, 255, 255, 1); /* White background with some transparency */
   border-radius: 50%; /* Makes it a circle */