Help for positioning in css

Question

Greetings🌸

I actually need help
I had made this code long time ago and now my friend showed me this
And the ring of the Saturn were not at the exact place were it should be
Suggest me
What PROPERTY and VALUE should be placed to get the exact results in every screens
https://sololearn.com/compiler-playground/WfnGNHJ18Mte/?ref=app
https://www.sololearn.com/post/1756920/?ref=app

Answer 1

Kim 반테
I cleaned up the code a bit. I tried to use more consistent units and removed duplicates. I also added the missing pop animation keyframes. Try to view it in a browser to see if it breaks apart.

https://sololearn.com/compiler-playground/WMaZH8VZsz66/?ref=app

Answer 2

।।।।।।।
Can you please go through it
And tell me the exact positioning?

Answer 3

Bob_Li
I'm not taking about container and mountain of this code
If you have seen my other codes
In that code i am facing the same problem

Answer 4

Tibor Santa
Thanks for this
I'll look after this
But i am certainly facing this problem in my most of my codes

Answer 5

Bob_Li
Yaah
I'll set the positioning here in this code
But the real thing I'm facing this problem in most of my codes
Somewhere in container, orbits , mountains etc etc

Answer 6

Bob_Li so I need specific property to get ride of this problem

Answer 7

.saturn {
position:absolute;
top:50px;
margin:0;
padding:0;
width:5.5em;
height:5.5em;
border-radius:100%;
background: linear-gradient(to bottom right, #ffd857, #d64fff, #8059ff, #54ffff);
box-shadow:0 0 15px #d64fff, 0 0 9px #009dff;
border:1px solid purple;
animation: spin 6s infinite linear;
}
.container{
width: 170px;
height: 170px;
position: fixed;
margin:0;
padding:0;
}
.ring{
background:transparent;
position:absolute;
top:calc(200px / 2 - 5.5em - 16px * 2 - 2px + 170px / 3);
left:calc(200px / 2 - 5.5em - 16px * 2 - 2px);
height:calc(5.5em * 2);
width:calc(5.5em * 2);
border-radius:50%;
border:16px solid #d64fff;
border-bottom:5px solid transparent;
transform:rotateX(100deg);
border-right-color:#8c2eff;
border-left-color:#009dff;
margin:0;
padding:0;
}
.wrapper {
width: 200px;
height: 200px;
display: block;
top:196px;
position:relative;
margin:0;
padding:0;
}
👇

Answer 8

Solo
Hola well thanks for that
But
I want some SPECIFIC PROPERTY to set my all code so that whenever it is seen from other devices like tab laptop etc in all screen it should appear the same

Answer 9

.ring{
...
top: ??? px;
...
}

Try changing this until it looks ok to you. :)
I don't know about EXACT value, I am not familiar with interstellar geography :)

Answer 10

maybe
.ring{
...
top:230px;
...
}

Answer 11

Bob_Li right though at 205 px it's even better

Answer 12

https://css-tricks.com
maybe they might ve covered regarding it in some blogs

Answer 13

।।।।।।।
it will put the front of the ring at rhe center, but the back feels too high at 205px. Remember the view is slightly from above, that's why we see an ellipse instead of a line. Centering the major axis of the ellipse feels like a better choice.

Answer 14

Kim 반테
your container does not contain anything at all.
also, what mountains...?
I'm not sure I understand.
perhaps if you nest everything inside a container div, it will be easier to move and resize the entire collection of divs as a group.

Answer 15

👆
I haven't done this for a long time, but if my memory serves me correctly, then the dimensions are determined like this.
Now, wherever you move the Saturn wrapper, everything will remain in its place.
It is also necessary to pay attention to what to measure, px is stable, em adapts to the screen size...😎

Answer 16

Kim 반테 really sorry but I can't atleast today 🤭😅

Answer 17

https://sololearn.com/compiler-playground/WaYfEEhT3S5P/?ref=app