I'm currently working on a React and Tailwind project. One of the components in my project includes an image and text, which is laid out like this on small screens:
https://i.sstatic.net/d6hku.png
The component I'm referring to is the card under the word "Events". It looks perfect in this layout, but on larger screens, I want it to be more horizontal like this:
https://i.sstatic.net/yDPuo.png
Both of these layouts are exactly what I envisioned. However, when I resize the window to a certain size (somewhere between md and sm), the image shrinks and doesn't fill the card completely. Here's a visual representation of the issue:
https://i.sstatic.net/yAdOc.png
You can see that the height of the image only takes up about 2/3 of the card's height. I tried adjusting the width of the image to half of the card's width in this situation, but couldn't get it right.
Below is the code snippet for the component:
<div className='flex flex-col w-auto bg-white border border-gray-500 rounded-t-xl overflow-hidden lg:flex-row md:rounded-xl'>
{/* Image Container */}
<div className='xs:w-full lg:w-1/4'>
<img className='object-cover' src={event.featured_image} alt={event.title} />
</div>
{/* Content Container */}
<div className="flex flex-col justify-between p-2">
{/* Content */}
<div>
<p className='text-xl text-blue-700 font-semibold'>{event.title}</p>
<p className='py-2 text-gray-700'>{event.description}</p>
</div>
<div className='pt-8 sm:pt-0'>
<p className='text-sm text-blue-500'>{event.start_date}{event.end_date ? ` - ${event.end_date}` : ''}</p>
</div>
</div>
</div>