Sidebar Styling issues with Mobile

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}