Advertisements
I am trying to have a div only appear once the screen is below sm and hidden once above sm size. In the example below, I want the first motion.div to appear at all sized except for small. I want the second div to only appear once screen is sm or smaller.
<>
<motion.div className="hidden sm:inline cursor-default w-8/12 bg-primary-bg overflow-auto h-3/4 rounded-2xl relative pt-5 items-center ">
<button className="absolute top-0 right-10 m-5 p-2 cursor-pointer" onClick={onClose}>
<XMarkIcon className='fixed h-10 w-10 text-primary-green' />
</button>
<div className="p-10">
<h2 className='text-lg sm:text-2xl pt-2 font-bold font-source-sans-pro uppercase cursor-text'>{essay.title}</h2>
<p className='pb-2 font-source-sans-pro capitalize cursor-text'>{essay.author}</p>
<p className='text-sm sm:text-lg font-source-serif-pro cursor-text' dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>')}}></p>
</div>
</motion.div>
<motion.div className='min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
<button className='absolute top-0 left-0 p-5 cursor-pointer' onClick={onClose}>
<ArrowLeftIcon className='fixed h-8 w-8'/>
</button>
<div className='p-5 mt-12'>
<h2 className='text-2xl uppercase font-source-sans-pro font-bold'>{essay.title}</h2>
<p className='text-md font-source-serif-pro'>{essay.author}</p>
<p className='mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text' dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>')}}></p>
</div>
</motion.div>
</>>Solution :
To have the second div to only appear once screen is sm or smaller, have it be visible "by default" and then apply display: none for sm: breakpoint with the sm:hidden class:
<script src="https://cdn.tailwindcss.com"></script>
<div class='sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
<button class='absolute top-0 left-0 p-5 cursor-pointer'>
<ArrowLeftIcon class='fixed h-8 w-8'>ArrowLeftIcon</ArrowLeftIcon>
</button>
<div class='p-5 mt-12'>
<h2 class='text-2xl uppercase font-source-sans-pro font-bold'>{essay.title}</h2>
<p class='text-md font-source-serif-pro'>{essay.author}</p>
<p class='mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text'>essay.content</p>
</div>
</div>