Sidebar Styling issues with Mobile

components/product/ProductSlider/ProductSlider.module.css

@@ -3,6 +3,15 @@
   overflow-y: hidden;
 }
 
+.slider {
+  @apply relative h-full transition-opacity duration-150;
+  opacity: 0;
+}
+
+.slider.show {
+  opacity: 1;
+}
+
 .control {
   @apply bg-violet absolute bottom-10 right-10 flex flex-row
   border-accent-0 border text-accent-0 z-30 shadow-xl;
@@ -36,23 +45,46 @@
 .thumb {
   @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
   inline-block cursor-pointer;
-  width: 275px;
+  width: 125px;
 }
 
-.thumb:focus,
 .thumb.selected {
   @apply bg-white;
 }
 
-.thumb:hover {
-  transform: scale(1.02);
-  background-color: rgba(255, 255, 255, 0.08);
-}
-
 .album {
   @apply bg-violet-dark;
   overflow-y: hidden;
   overflow-x: auto;
   white-space: nowrap;
-  height: 275px;
+  height: 125px;
+}
+
+@screen md {
+  .thumb:hover {
+    transform: scale(1.02);
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  .thumb.selected {
+    @apply bg-white;
+  }
+
+  .album {
+    height: 235px;
+  }
+
+  .slider {
+    max-height: 700px;
+  }
+
+  .thumb {
+    width: 235px;
+  }
+}
+
+@screen lg {
+  .slider {
+    max-height: 750px;
+  }
 }

components/product/ProductSlider/ProductSlider.tsx

@@ -77,8 +77,7 @@ const ProductSlider: FC = ({ children }) => {
     <div className={s.root} ref={sliderContainerRef}>
       <div
         ref={ref}
-        className="relative keen-slider h-full transition-opacity duration-150"
-        style={{ opacity: isMounted ? 1 : 0 }}
+        className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
       >
         {slider && (
           <div className={s.control}>

components/product/ProductView/ProductView.module.css

@@ -4,7 +4,7 @@
 
 .main {
   @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
-  min-height: 600px;
+  min-height: 500px;
 }
 
 .nameBox {
@@ -22,13 +22,17 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
 }
 
 .sliderContainer {
   @apply flex items-center justify-center overflow-x-hidden bg-violet;
 }
 
+.imageContainer {
+  @apply text-center;
+}
+
 .imageContainer > div,
 .imageContainer > div > div {
   @apply h-full;
@@ -39,7 +43,7 @@
 }
 
 .button {
-  min-width: 300px;
+  width: 100%;
 }
 
 .wishlistButton {
@@ -47,13 +51,7 @@
 }
 
 @screen md {
-  .main {
-    min-height: 700px;
-  }
-
   .button {
-    text-align: center;
-    width: 100%;
     max-width: 300px;
   }
 }

components/product/ProductView/ProductView.tsx

@@ -185,7 +185,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             >
               <ProductCard
                 key={p.path}
-                className={s.relatedProduct}
                 variant="simple"
                 className="animated fadeIn"
                 product={p}