https://i.sstatic.net/RJ2ao.jpg
I noticed there is a scrollbar on the x-axis.
However, when I try to use the mouse wheel in that section, it doesn't seem to work...
If you have any insights, please assist me with resolving this issue.
Below is my code snippet:
<div className="flex space-x-3 overflow-scroll p-3 -ml-3">
{cardsData?.map(({ img, title }) => (
<MediumCard key={img} img={img} title={title} />
))}
</div>
Here is the MediumCard component code:
const MediumCard = ({ img, title }) => {
return (
<div className="cursor-pointer transform transition hover:scale-105 duration-300 ease-out ">
<div className="relative h-80 w-80">
<Image src={img} layout="fill" className="rounded-xl" />
</div>
<h3 className="text-2xl mt-3">{title}</h3>
</div>
);
};