I have this code that works completely fine on desktop/laptop viewports but not when I use a tablet or my phone. I want to create this code responsive on all breakpoints.
I tried using aspect ratios as well as responsive grid utilities but I am unable to get it quite right.
I want to try changing the fixed positions to something dynamic which make fix the issue of not being dynamic.
<div className='max-w-screen-lg py-28 mx-auto flex flex-col items-center'>
<div className='w-full grid grid-cols-12'>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-l border-border'/>
<div className='aspect-square w-full border-y border-x border-border'/>
</div>
<div className='w-full grid grid-cols-12'>
<div className='w-full border-l border-border'></div>
<div className='col-span-10 flex flex-col justify-center items-center py-12 border-l border-border'>
<p className='text-5xl tracking-tight font-medium'>XXXXXX <span className='font-serif italic underline decoration-dashed decoration-lime-200'>XXXXXXXXX</span> XXXXXX</p>
<p className='text-xl tracking-tight mt-2 text-muted-foreground'>XXX XXX XXXXX XXXXX XXX XXXXXX XXX XXXXX</p>
</div>
<div className='w-full border-x border-border'></div>
</div>
<div className='w-full grid grid-cols-12'>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border flex flex-col justify-end'>
<div className='w-full rounded-tr-xl flex items-center justify-center py-1 bg-blue-500'>
<p className="text-white font-semibold tracking-tighter text-sm">XXXXXXX</p>
</div>
</div>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-l border-border'/>
<div className='aspect-square w-full border-t border-x border-border'/>
</div>
<div className='flex items-start w-full'>
<div className='flex flex-col p-8 border-y border-l border-border w-full'>
<div className='flex space-x-2 items-center'>
<div className='flex items-center justify-center w-8 h-8 bg-muted rounded-md'>
<Bean className="w-5 h-5 text-lime-600" />
</div>
<p className='tracking-tight text-xl font-medium'>XXXX</p>
</div>
<p className='tracking-tight text-4xl mt-4'>XXXXX<span className='text-muted-foreground text-base'> X XXXXX</span></p>
<div className='flex space-x-1 items-center mt-4'>
<Image src={'/XXXXXXXXX.svg'} width={20} height={20} alt="logo" />
<span className='whitespace-nowrap text-base ml-1 font-mono font-medium bg-clip-text bg-gradient-to-r from-lime-500 via-blue-400 to-indigo-400 text-transparent'>XXXXXXXX</span>
<span className='bg-gradient-to-r from-blue-100 to-indigo-200 ml-1.5 mb-0.5 rounded-full text-[10px] text-black font-semibold px-2 py-0.5'>XXXX</span>
</div>
<p className='text-sm font-medium text-muted-foreground pl-4 ml-2.5 mt-1 border-l border-border'>XXXXXXXXX XXX</p>
<Button size={'sm'} variant={'default'} className='w-full mt-4 text-sm tracking-tight font-medium group'>XXX XXXXX<ArrowRight className='-ml-1 stroke-1.5 w-4 h-4 group-hover:translate-x-1 transition-all' /></Button>
</div>
<div className='flex flex-col p-8 border-y border-l border-border w-full bg-muted/30'>
<div className='flex space-x-2 items-center'>
<div className='flex items-center justify-center w-8 h-8 bg-muted rounded-md'>
<Sprout className="w-5 h-5 text-blue-600" />
</div>
<p className='tracking-tight text-xl font-medium'>XXXX</p>
</div>
<p className='tracking-tight text-4xl mt-4'>XXXXXX<span className='text-muted-foreground text-base'> X XXXXX</span></p>
<div className='flex space-x-1 items-center mt-4'>
<Image src={'/XXXXXXXXX.svg'} width={20} height={20} alt="logo" />
<span className='whitespace-nowrap text-base ml-1 font-mono font-medium bg-clip-text bg-gradient-to-r from-lime-500 via-blue-400 to-indigo-400 text-transparent'>XXXXXXXX</span>
<span className='bg-gradient-to-r from-blue-400 to-indigo-500 ml-1.5 mb-0.5 rounded-full text-[10px] text-white font-semibold px-2 py-0.5'>XXX</span>
</div>
<p className='text-sm font-medium text-muted-foreground pl-4 ml-2.5 mt-1 border-l border-border'>XXXXXXXXX XXXX</p>
<p className='font-serif tracking-tight font-medium italic mt-2 text-xl'>XXXXXX<span className='font-sans not-italic text-base font-normal'> XXX </span></p>
<p className='text-sm font-medium text-muted-foreground pl-4 ml-2.5 mt-1 border-l border-border'>XXX XXXX XXXXXXXX XX XXX XXXXX</p>
<Button size={'sm'} variant={'default'} className='text-white w-full mt-4 text-sm tracking-tight font-medium group bg-blue-500 hover:bg-blue-500/90 transition-all'>XXXX XX XXXXX<ArrowRight className='-ml-1 stroke-1.5 w-4 h-4 group-hover:translate-x-1 transition-all' /></Button>
</div>
<div className='flex flex-col p-8 border border-border w-full'>
<div className='flex space-x-2 items-center'>
<div className='flex items-center justify-center w-8 h-8 bg-muted rounded-md'>
<TreePine className="w-5 h-5 text-purple-600" />
</div>
<p className='tracking-tight text-xl font-medium'>XXX</p>
</div>
<p className='tracking-tight text-4xl mt-4'>XXXXXX<span className='text-muted-foreground text-base'> X XXXXX</span></p>
<div className='flex space-x-1 items-center mt-4'>
<Image src={'/XXXXXXXXX.svg'} width={20} height={20} alt="logo" />
<span className='whitespace-nowrap text-base ml-1 font-mono font-medium bg-clip-text bg-gradient-to-r from-lime-500 via-blue-400 to-indigo-400 text-transparent'>XXXXXXXX</span>
<span className='bg-gradient-to-r from-blue-400 to-indigo-500 ml-1.5 mb-0.5 rounded-full text-[10px] text-white font-semibold px-2 py-0.5'>XXX</span>
</div>
<p className='text-sm font-medium text-muted-foreground pl-4 ml-2.5 mt-1 border-l border-border'>XXXXXXXX XXX</p>
<p className='font-serif tracking-tight font-medium italic mt-2 text-xl'>XXXXXX<span className='font-sans not-italic text-base font-normal'> XXX </span></p>
<p className='text-sm font-medium text-muted-foreground pl-4 ml-2.5 mt-1 border-l border-border'>XXXXXXXX XXXX</p>
<div className='flex space-x-1 items-center mt-2'>
<p className='font-serif tracking-tight font-medium italic text-xl'>XXXXXX<span className='font-sans not-italic text-base font-normal'> XXX</span></p>
<span className='bg-gradient-to-br from-lime-400 to-green-500 ml-1.5 rounded-full text-[10px] text-white font-semibold px-2 py-0.5'>XXXX</span>
</div>
<p className='text-sm font-medium text-muted-foreground pl-4 ml-2.5 mt-1 border-l border-border'>XXX XXX X XXX XXXXXXXXX XX</p>
<Button size={'sm'} variant={'default'} className='text-white w-full mt-4 tracking-tight font-medium text-sm group bg-purple-500 hover:bg-purple-500/90 transition-all'>XXXXXXX<ArrowRight className='-ml-1 stroke-1.5 w-4 h-4 group-hover:translate-x-1 transition-all' /></Button>
</div>
</div>
</div>
You need to use responsive markup.
See tailwind responsiveness for some nice examples.
Here is 1 very simple example:
<div class="grid grid-cols-1 md:grid-cols-2">
[...your content goes here]
</div>
This will allow 1 column in the div by default. If the width of the viewport matched tailwind's md (medium) size or greater then the div will allow 2 columns within it. You can extend this to use any or all of the responsive markers: for example:
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
[...your content goes here]
</div>