I'm currently working on a component that displays a set of images with horizontal scroll. The challenge I'm facing is setting different dimensions for mobile/tablet screens and desktop screens. For mobile and tablet, I want the images to be displayed with width: 125px and height: 250px, while for desktop screens, I need them to have width: 250px and height: 520px.
Below is the code snippet I've tried so far:
import React from 'react';
import Image from 'next/image';
const recentGameItems = [
{ id: 1, icon: '/images/slot1.png' },
{ id: 2, icon: '/images/slot2.png' },
{ id: 3, icon: '/images/slot3.png' },
{ id: 4, icon: '/images/slot1.png' },
{ id: 5, icon: '/images/slot2.png' },
{ id: 6, icon: '/images/slot3.png' },
{ id: 7, icon: '/images/slot1.png' },
];
const V2Layout: React.FC = () => {
return (
<div className="flex overflow-x-auto no-scrollbar overflow-y-hidden items-center">
<div>
<div
className="flex list-none font-semibold text-white"
style={{ width: `${recentGameItems.length * 125}px` }}
>
{recentGameItems.map(recentGameItem => (
<div
key={recentGameItem.id}
className="flex flex-col px-1 items-center justify-center"
>
<div className="w-250 h-250 md:w-125 md:h-250 bg-yellow-200">
<Image
src={recentGameItem.icon}
alt={`Menu Icon ${recentGameItem.id}`}
width={125} // Width for mobile and tablet screens
height={250} // Height for mobile and tablet screens
/>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default V2Layout;
If anyone has suggestions or solutions to help me address this issue, I would greatly appreciate it. Thank you!