I got some starter code from a tutorial and I've been struggling to set the correct size. I've tried to find solutions via documentation but I feel like I'm missing something very basic. The issue that I am having is that the size of the box changes based on the content that is inside. I'd like a definitive size set regardless of the inside content. This is my code for the section:
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
rel="noopener noreferrer"
target="_blank"
className="flex w-1/2 h-full p-4">
<div className="flex relative">
<img
alt="gallery"
className="absolute inset-0 w-full h-full rounded-2xl object-cover object-center border-4 border-white"
src={project.image}
/>
<div className="px-8 py-10 relative z-0 w-full rounded-2xl border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className="tracking-widest text-sm title-font font-medium text-orange-700 mb-1">
{project.subtitle}
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
{project.title}
</h1>
<p className="leading-relaxed">{project.description}</p>
</div>
</div>
</a>
))}
</div>
Thank you!
CodePudding user response:
On your a tag you have className="flex w-1/2 h-full p-4">
updating the h-full
to be the specified height that you want should do the trick. The tailwind numbers will provide a value in em
I believe. To get these to be a px
value you can write the style like this: h-[50px]
but include your desired height in the square brackets instead of teh 50px
.