Dropdown Menu

components/product/ProductView/ProductView.module.css

@@ -7,7 +7,7 @@
 }
 
 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-7;
+  @apply relative flex px-0 pb-0 relative box-border col-span-1;
   margin-right: -2rem;
   margin-left: -2rem;
   min-height: 400px;
@@ -17,7 +17,7 @@
   }
 
   @screen lg {
-    @apply mx-0;
+    @apply mx-0 col-span-7;
     min-height: 100%;
     height: 100%;
   }
@@ -55,9 +55,10 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-5;
+  @apply flex flex-col col-span-1;
 
   @screen lg {
+    @apply col-span-5;
     padding-top: 5rem;
   }
 }

components/product/ProductView/ProductView.tsx

@@ -1,14 +1,14 @@
+import cn from 'classnames'
 import { NextSeo } from 'next-seo'
+import s from './ProductView.module.css'
 import { FC, useState, useEffect } from 'react'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 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'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
+import { getProductOptions } from '../helpers'
 interface Props {
   className?: string
   children?: any
@@ -130,7 +130,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
             ))}
             <div className="pb-12">
               <div
-                className="pb-14 break-words"
+                className="pb-14 break-words w-full"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
               <Button