I'm currently working on a front-end UI project using React, Next.js, and Tailwind CSS. I've set the design for mobile devices but encountering issues with element placement on smaller screens. Most elements have fixed sizes, and I've tried using percentage width and viewport width to make them responsive without success. My goal is to scale down each element to fit perfectly on small devices and scale up on larger ones. I also attempted applying scaling to the body tag with no luck. If anyone has come across a similar situation or can provide guidance, please help me out.
For reference, here's a link to an example website that demonstrates the behavior I'm trying to achieve: Example Website. Feel free to view it in mobile responsive mode and adjust the viewport for testing purposes.
This code snippet showcases one of the elements:
<div className="grid grid-cols-3 gap-10 mt-10">
{/* Characters */}
<div className="flex flex-col justify-center items-center">
<div className="rounded-full flex justify-center items-center bg-blue-100 w-[2.75rem] h-[2.75rem]">
<img src={`/assets/menu/${gameName}/${menu.characters.image}`} alt='menu' className="w-[35px] h-[35px]" />
</div>
<p className="text-blue-100 font-semibold mt-1">{menu.characters.text}</p>
</div>
{/* Weapons */}
<div className="flex flex-col justify-center items-center">
<div className="rounded-full flex justify-center items-center bg-blue-100 w-[2.75rem] h-[2.75rem]">
<img src={`/assets/menu/${gameName}/${menu.weapons.image}`} alt='menu' className="w-[35px] h-[35px]" />
</div>
<p className="text-blue-100 font-semibold mt-1">{menu.weapons.text}</p>
</div>
{/* Gears */}
<div className="flex flex-col justify-center items-center">
<div className="rounded-full flex justify-center items-center bg-blue-100 w-[2.75rem] h-[2.75rem]">
<img src={`/assets/menu/${gameName}/${menu.gears.image}`} alt='menu' className="w-[35px] h-[35px]" />
</div>
<p className="text-blue-100 font-semibold mt-1">{menu.gears.text}</p>
</div>
{/* Map */}
<div className="flex flex-col justify-center items-center">
<div className="rounded-full flex justify-center items-center bg-blue-100 w-[2.75rem] h-[2.75rem]">
<img src={`/assets/menu/${gameName}/${menu.map.image}`} alt='menu' className="w-[35px] h-[35px]" />
</div>
<p className="text-blue-100 font-semibold mt-1">{menu.map.text}</p>
</div>
{/* Books */}
<div className="flex flex-col justify-center items-center">
<div className="rounded-full flex justify-center items-center bg-blue-100 w-[2.75rem] h-[2.75rem]">
<img src={`/assets/menu/${gameName}/${menu.readable.image}`} alt='menu' className="w-[35px] h-[35px]" />
</div>
<p className="text-blue-100 font-semibold mt-1">{menu.readable.text}</p>
</div>
{/* Beings */}
<div className="flex flex-col justify-center items-center">
<div className="rounded-full flex justify-center items-center bg-blue-100 w-[2.75rem] h-[2.75rem]">
<img src={`/assets/menu/${gameName}/${menu.beings.image}`} alt='menu' className="w-[35px] h-[35px]" />
</div>
<p className="text-blue-100 font-semibold mt-1">{menu.beings.text}</p>
</div>
</div>