Merge branch 'master' of https://github.com/okbel/e-comm-example

components/product/ProductView/ProductView.module.css

@@ -2,19 +2,17 @@
   @apply relative grid items-start my-12 gap-8 grid-cols-1;
 
   @screen md {
-    @apply grid-cols-2;
+    @apply grid-cols-12;
   }
 }
 
 .button {
   min-width: 300px;
   text-align: center;
-
-  justify-self: center;
 }
 
 .productDisplay {
-  @apply flex px-0 pb-0 relative box-border min-h-full;
+  @apply flex px-0 pb-0 relative box-border min-h-full col-span-7;
   margin-right: -2rem;
   margin-left: -2rem;
 
@@ -50,10 +48,27 @@
 
   @screen md {
     @apply inset-14;
-    min-height: 400px;
+    min-height: 100%;
   }
 }
 
-.productSliderContainer {
-  @apply absolute z-10 inset-0 flex items-center justify-center mt-6;
+.sidebar {
+  @apply flex flex-col md:pt-24 col-span-5;
+}
+
+.sliderContainer {
+  @apply absolute z-10 inset-0 flex items-center justify-center;
+
+  @screen lg {
+    @apply -m-12;
+  }
+}
+
+.img {
+  @apply w-full object-cover;
+
+  @screen xl {
+    margin-top: -14%;
+    height: 140%;
+  }
 }

components/product/ProductView/ProductView.tsx

@@ -76,13 +76,13 @@ const ProductView: FC<Props> = ({ product, className }) => {
             </div>
           </div>
 
-          <div className={s.productSliderContainer}>
+          <div className={s.sliderContainer}>
             <ProductSlider>
               {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
                 <img
                   key={image?.node.urlSmall}
-                  className="w-full object-cover"
+                  className={s.img}
                   src={image?.node.urlXL}
                   loading={i === 0 ? 'eager' : 'lazy'}
                 />
@@ -97,7 +97,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           )}
         </div>
 
-        <div className="flex flex-col md:pt-24">
+        <div className={s.sidebar}>
           <section>
             {options?.map((opt: any) => (
               <div className="pb-4" key={opt.displayName}>