From b70557397b46f84fe0cec8c18ec4f6aa2e0bf229 Mon Sep 17 00:00:00 2001
From: Samantha Kellow <sammii.h@icloud.com>
Date: Thu, 23 Nov 2023 19:16:34 +0000
Subject: [PATCH] creating responsive design

---
 app/products/[handle]/page.tsx             |  4 ++--
 app/wall/[handle]/page.tsx                 |  2 +-
 components/grid/index.tsx                  |  2 +-
 components/grid/tile.tsx                   |  2 +-
 components/product/gallery.tsx             | 26 +++++++++++-----------
 components/product/product-description.tsx |  2 +-
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/products/[handle]/page.tsx b/app/products/[handle]/page.tsx
index 3ae1bbf2c..a8853bbb0 100644
--- a/app/products/[handle]/page.tsx
+++ b/app/products/[handle]/page.tsx
@@ -83,7 +83,7 @@ export default async function ProductPage({ params }: { params: { handle: string
       />
       <div className="mx-auto max-w-screen-2xl px-4">
         <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
-          <div className="lg:col-span-3">
+          <div className="lg:col-span-3 flex justify-center">
             <Gallery
               images={product.images.map((image: Image) => ({
                 src: image.url,
@@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           </div>
           
           <div className="lg:col-span-3 lg:grid lg:grid-cols-6">
-            <div className="py-6 lg:col-span-4 lg:col-start-2">
+            <div className="pt-6 lg:py-6 lg:col-span-4 lg:col-start-2">
               <ProductDescription product={product} />
             </div>
           </div>
diff --git a/app/wall/[handle]/page.tsx b/app/wall/[handle]/page.tsx
index 3ae1bbf2c..bc77f93dd 100644
--- a/app/wall/[handle]/page.tsx
+++ b/app/wall/[handle]/page.tsx
@@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           </div>
           
           <div className="lg:col-span-3 lg:grid lg:grid-cols-6">
-            <div className="py-6 lg:col-span-4 lg:col-start-2">
+            <div className="py-10 lg:py-6 lg:col-span-4 lg:col-start-2">
               <ProductDescription product={product} />
             </div>
           </div>
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 92681555a..b7bdce6de 100644
--- a/components/grid/index.tsx
+++ b/components/grid/index.tsx
@@ -10,7 +10,7 @@ function Grid(props: React.ComponentProps<'ul'>) {
 
 function GridItem(props: React.ComponentProps<'li'>) {
   return (
-    <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
+    <li {...props} className={clsx('aspect-square transition-opacity flex align-middle', props.className)}>
       {props.children}
     </li>
   );
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index 77c62cca4..98e37610f 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -20,7 +20,7 @@ export function GridTileImage({
   return (
     <div
       className={clsx(
-        'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-gray-600 dark:bg-black',
+        'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-gray-600 dark:bg-black aspect-square align-middle',
         {
           relative: label,
           'border-2 border-gray-600': active,
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index efe6803bd..3ed882324 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -20,22 +20,22 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
 
   return (
-    <div className="mr-8 h-full">
-      <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
+    <div className="lg:mr-8 h-full w-full justify-center">
+      <div className="relative mb-2 lg:mb-12 aspect-square overflow-hidden flex lg:w-full lg:h-auto"> 
         {images[currentImageIndex] && (
-          <Image
-            className="relative h-full w-full object-cover"
-            height={600}
-            width={600}
-            alt={images[currentImageIndex]?.altText as string}
-            src={images[currentImageIndex]?.src as string}
-            priority={true}
-          />
+            <Image
+              className="relative w-full h-full object-cover"
+              height={500}
+              width={500}
+              alt={images[currentImageIndex]?.altText as string}
+              src={images[currentImageIndex]?.src as string}
+              priority={true}
+            />
         )}
 
         {images.length > 1 ? (
-          <div className="absolute bottom-2 flex w-full justify-center">
-            <div className="mx-auto flex h-8 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
+          <div className="bottom-2 z-50 flex w-full justify-center absolute">
+            <div className="mx-auto flex h-8 items-center rounded-full border border-white bg-neutral-50/50 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
               <button
                 aria-label="Previous product image"
                 onClick={() => handleNavigate('previous')}
@@ -57,7 +57,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       </div>
 
       {images.length > 1 ? (
-        <div className="flex items-center justify-center gap-2 overflow-auto py-1">
+        <div className="flex items-center justify-center gap-2 overflow-auto py-1 pl-20 md:pl-0">
           {images.map((image, index) => {
             const isActive = index === currentImageIndex;
             return (
diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
index 726c1f7b1..40dffb424 100644
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@@ -10,7 +10,7 @@ export function ProductDescription({ product }: { product: Product }) {
   return (
     <>
       <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
-        <h1 className="mb-2 text-4xl md:text-3xl font-medium">{product.title}</h1>
+        <h1 className="mb-2 text-2xl md:text-3xl font-medium">{product.title}</h1>
         <div className="place-self-end mr-auto w-auto rounded-full bg-gray-600 p-2 text-sm text-white">
           <Price
             amount={product.priceRange.maxVariantPrice.amount}