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
I tried to remove scale and change inset to auto auto 2% 60%. That should set and keep it in the bottom right corner.
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%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 😁