I'm encountering issues trying to implement a Tailwind grid on different breakpoints. I created a card in Next.js that I want to display in a grid layout. It looks fine on larger devices but doesn't adjust for medium/small ones as intended. The grid should initially have 4 columns, then transition to 2 on medium devices, and finally collapse into a single column on small devices. However, this behavior isn't happening.
Here is the Hero section responsible for rendering this grid:
const Hero = () => {
return (
<section>
<div className='flex flex-row justify-between max-w-screen-xl items-center mx-auto p-4'>
<div className='w-1/2 pt-0'>
<Image src={Couple_Coder} alt="CodeCouple" className='h-auto'>
</Image>
</div>
<div className='w-1/2 flex flex-col space-y-4 items-center self-center'>
<div className='h-1/4'>
<AnimatedText text="Some Text" className='!text-left !text-6xl'/>
<AnimatedText text="Some Text" className='!text-left !text-6xl'/>
<AnimatedText text="Some Text" className='!text-left !text-6xl'/>
</div>
<div className='mt-10 h-1/4'>
<p className='my-4 text-base text-center font-medium pb-10'>
Some Text!!!
</p>
</div>
<div className='h-1/4 flex flex-row space-x-4 mt-10 mb-8 pt-4 gap-3'>
<button type='button' className='button-6'>Workshops</button>
<button type='button' className='button-6 ml-4'>Discord</button>
</div>
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-screen-xl gap-4 mx-auto'>
<div className='col-span-1'>
<AnimatedText text="Join Our Workshops" />
</div>
<div className='flex col-span-1 md:col-span-2 lg:col-span-4 md:justify-between lg:justify-between gap-4'>
<Card />
<Card />
<Card />
<Card />
</div>
</div>
</section>
)
}
I also have a global layout applied to all children components:
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<div className="overflow-hidden bg-site bg-cover bg-no-repeat bg-white border-gray-200 dark:bg-gray-100">
</div>
<Navbar />
<main className='app xl:p-24 lg:p-16 md:p-12 sm:p-8 bg-white border-gray-200 dark:bg-gray-100 '>
{children}
</main>
</body>
</html>
)
}
Any insights into what might be going wrong?
My goal is to have 4 columns on large devices, switch to 2 columns on medium devices, and eventually go down to 1 column on small devices.
Thank you!
I've experimented with changing the classNames of the divs and adjusting the screen defaults in the Tailwind config file. I even tried setting my own breakpoint order from large devices to small, but unfortunately, none of these attempts have resolved the issue.