project_metaverse
project_metaverse copied to clipboard
The world is bugged on small screens
I noticed that when i make my browser the smallest in width, the people icons positions are not good placed.
Also, the whole map is cut it isn't the whole world it shows only Africa.
Anyone found a fix for this?
This worked for me.
In motion.div wrapping the map, remove h-[550px]
for 1st image i.e people-01
className="absolute bottom-[16%] right-[8%] w-[40px] md:w-[50px] lg:w-[70px] h-[40px] md:h-[50px] lg:h-[70px] p-[6px] rounded-full bg-[#5d6680]"
for 2nd image i.e people-02 className="absolute top-[10%] left-[10%] w-[40px] md:w-[50px] lg:w-[70px] h-[40px] md:h-[50px] lg:h-[70px] p-[6px] rounded-full bg-[#5d6680]"
for 3rd image i.e people-03 className="absolute top-[45%] left-[42%] w-[40px] md:w-[50px] lg:w-[70px] h-[40px] md:h-[50px] lg:h-[70px] p-[6px] rounded-full bg-[#5d6680]"
Hey thank you @aman-lama I will give it a try!