Getting 'position: absolute' to be responsive😕

Yes, I am about to look at Kevin's video next(again). My problem is understanding position and images. But both together I am always stumped. Problem: the <svg> just happens to be an image. It looks fine now. Still not sure why. However, on smaller screens it keeps moving. Should I use media queries. Isn't there a better way? https://icodethis.com/modes/design-to-code/526/submissions/304931 Thank for the help.
iCodeThis | Coding Challenges
@torres completed the 'Sync Component' coding challenge
3 Replies
Lamer of Sweden
Lamer of Sweden2mo ago
I tried to remove scale and change inset to auto auto 2% 60%. That should set and keep it in the bottom right corner.
MarkBoots
MarkBoots2mo ago
when you use scale, it will by default scale from the center of the image. set transform-origin: bottom right but in your case, you could also just set the width of the svg to 50%. because it is positioned absolute, it will be 50% of the relative element. and with right: 0, bottom: 0 it will be in the bottom right if you want to use inset instead of width, bottom and right inset: auto 0 0 50%
torres
torres2mo ago
Thank you for your help. It is staying in place now. Next time I'll just use Grid. Sometimes you just have to practice it to keep some muscle memory. Now to fix the <fieldset>. Wish me luck 😁