Keep absolute positioned item in the same place regardless of the screen size

Hello, I am working on waldo style app. When user finds a character i want to display a checkmark in that position. Currently, i am using offsetX and offsetY of the image to display checkmark. However the problem i am encoutering is that when you resize the screen checkmar's position gets all messed up because i am using fixed units. Is there a way to make sure that checkmark element always stays in the same position regardless of the screen size?
No description
6 Replies
Suna
Suna•5w ago
i think i got it. if i do:
x: Math.floor((x / rect.width) * 100),
y: Math.floor((y / rect.height) * 100)
x: Math.floor((x / rect.width) * 100),
y: Math.floor((y / rect.height) * 100)
it stays almost the same regardless of the screen size. I had y / rect.width and didn't notice it untill now
Kevin Powell
Kevin Powell•5w ago
Use viewport units instead of fixed units, I think that'd do the trick, and one of the few times I'd suggest viewport units 😅
Suna
Suna•5w ago
i am currently using percentage. I am not entirely sure how to calculate viewport units? any hints?
b1mind
b1mind•5w ago
Grid stack ?
Kevin Powell
Kevin Powell•5w ago
might be very similar to percentage... 10vw is 10% of the viewport. So 100vw is the entire viewport.
Suna
Suna•5w ago
ah alright. Gonna try it out. Thank you!
Want results from more Discord servers?
Add your server
More Posts