Changes to productView

components/product/ProductView/ProductView.module.css

@@ -1,7 +1,59 @@
+.root {
+  @apply relative grid items-start my-12 gap-8 grid-cols-1;
+
+  @screen md {
+    @apply grid-cols-2;
+  }
+}
+
 .button {
   min-width: 300px;
+  text-align: center;
+
+  justify-self: center;
+}
+
+.productDisplay {
+  @apply flex px-0 pb-0 relative box-border min-h-full;
+  margin-right: -2rem;
+  margin-left: -2rem;
+
+  min-height: 400px;
+
+  @screen md {
+    @apply px-24 mx-0;
+  }
+}
+
+.nameBox {
+  @apply absolute top-0 left-0 z-50;
+
+  & .name {
+    @apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
+  }
+
+  & .price {
+    @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
+  }
+
+  @screen md {
+    & .name,
+    & .price {
+      @apply bg-violet text-white;
+    }
+  }
 }
 
 .squareBg {
-  @apply absolute inset-24 z-0 bg-violet;
+  @apply absolute inset-0 bg-violet z-0;
+  max-height: 250px;
+
+  @screen md {
+    @apply inset-14;
+    min-height: 400px;
+  }
+}
+
+.productSliderContainer {
+  @apply absolute z-10 inset-0 flex items-center justify-center mt-6;
 }

components/product/ProductView/ProductView.tsx

@@ -8,6 +8,7 @@ import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { getProductOptions } from '../helpers'
 import s from './ProductView.module.css'
 import { isDesktop } from '@lib/browser'
+import cn from 'classnames'
 interface Props {
   className?: string
   children?: any
@@ -63,22 +64,21 @@ const ProductView: FC<Props> = ({ product, className }) => {
           ],
         }}
       />
-      <div className="relative flex flex-row items-start fit my-12">
-        <div className="absolute top-0 left-0 z-50">
-          <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
-            {product.name}
-          </h1>
-          <div className="px-6 py-2 pb-4 bg-violet text-white font-bold inline-block traking">
-            {product.prices?.price.value}
-            {` `}
-            {product.prices?.price.currencyCode}
+      <div className={cn(s.root, 'fit')}>
+        <div className={s.productDisplay}>
+          <div className={s.squareBg}></div>
+          <div className={s.nameBox}>
+            <h1 className={s.name}>{product.name}</h1>
+            <div className={s.price}>
+              {product.prices?.price.value}
+              {` `}
+              {product.prices?.price.currencyCode}
+            </div>
           </div>
-        </div>
 
-        <div className="flex-1 px-24 pb-0 relative fit  box-border">
-          <div className="absolute z-10 inset-0 flex items-center justify-center">
+          <div className={s.productSliderContainer}>
             <ProductSlider>
-              {/** TODO: Change with Image Component */}
+              {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
                 <img
                   key={image?.node.urlSmall}
@@ -95,11 +95,9 @@ const ProductView: FC<Props> = ({ product, className }) => {
               <img src="/slider-arrows.png" />
             </div>
           )}
-
-          <div className={s.squareBg}></div>
         </div>
 
-        <div className="flex-1 flex flex-col pt-24">
+        <div className="flex flex-col md:pt-24">
           <section>
             {options?.map((opt: any) => (
               <div className="pb-4" key={opt.displayName}>