responsive

src/app/product/[id]/page.tsx

@@ -19,7 +19,7 @@ import Questions from '@/app/product/components/Questions'
 
 const SingleProduct: NextPage = () => {
     return (
-        <div className='mt-14 px-4 sm:px-8 md:px-20'>
+        <div className='mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20'>
             <div className='flex flex-col sm:flex-row justify-between gap-4 sm:gap-0'>
                 <Breadcrumb aria-label="breadcrumb">
                     <BreadcrumbList className="text-sm text-muted-foreground">
@@ -40,8 +40,10 @@ const SingleProduct: NextPage = () => {
                 <div className='text-primary text-xs sm:text-sm'>فروشنده شوید</div>
             </div>
 
-            <div className='flex flex-col lg:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
-                <ShopInformation />
+            <div className='flex flex-col xl:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
+                <div className='xl:w-[325px] xl:shrink-0'>
+                    <ShopInformation />
+                </div>
                 <div className='flex-1 flex flex-col gap-6'>
                     <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
                         <ProductImage />