responsive
This commit is contained in:
@@ -5,78 +5,78 @@ import Image from 'next/image'
|
||||
|
||||
const Comments: NextPage = () => {
|
||||
return (
|
||||
<div className='p-6'>
|
||||
<div className='p-3 sm:p-4 md:p-6'>
|
||||
<Menu pageActive='comments' />
|
||||
|
||||
<div className='mt-14'>
|
||||
<div className='flex gap-6 border-b border-border pb-6'>
|
||||
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border pb-4 sm:pb-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-20 max-h-20 object-contain'
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-4'>
|
||||
<div>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-sm text-[#999999]'>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[#4C4C4C] text-sm'>
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6 border-b border-border py-6'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-20 max-h-20 object-contain'
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-4'>
|
||||
<div>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-sm text-[#999999]'>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[#4C4C4C] text-sm'>
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6 border-b border-border py-6'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-20 max-h-20 object-contain'
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-4'>
|
||||
<div>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-sm text-[#999999]'>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[#4C4C4C] text-sm'>
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user