Output was not same in app and browser

Question

I have written a code to display solar system usin html, css, and js but the output was not same in Chrome or other browsers?? Why was this happening
https://code.sololearn.com/WBrjr8EdnlfF/?ref=app

Answer 1

Because % is a unit relative to its parent.

Take the margin-left of sun for example.

-40% is referring 40% of parent, or window screen width.

When you adjust for best positione on mobile portrait view, because on computer the view is landscape, so the screen width is super large (compared to screen height), so the sun becomes positioned at somewhere left outside the screen.

The solution is to change the % to px,

or use media query for a different set of css rules on different screen orientation.

Answer 2

Thanks bro