How to fit every elements in every device size while retaining their placements

I am coding a front end ui with react next js and tailwind css I set a mobile size and code the ui but in smaller devices, the elements placement are not consistent like original anymore. A lot of elements will have their own fixed size. I tried using percentage width and viewport width on these elements but no luck. In smaller devices, i want to scale each element down to fit in the current device size perfectly. In bigger devices, i want to scale up. I also tried using scale on body tag but no luck. I have an example website that behaves like that. Please help me out

Example Website View it in mobile responsive mode and try adjusting the viewport

This is an example of an element

 <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>

Solution

I figured it out!

When I tried applying viewport width to elements, I am using like this

<div className="rounded-full flex justify-center items-center bg-blue-100 w-[10vw] h-[10vh]">

I thought this is correct considering width should be given with vw and height should be given with vh. But it's not the case.

I used this and it worked without having the need to write media queries

<div className="rounded-full flex justify-center items-center bg-blue-100 w-[10vw] h-[10vw]">