How to make the same view on diferent devices?

Question

the view on my tablet and phone are not the same.
https://code.sololearn.com/Wz2vdUm8A253/?ref=app
https://code.sololearn.com/Wq48QgHbufrZ/?ref=app

Answer 1

Yes! I did it. thank you! 😊
Though for the furniture it doesn't work ☹️

Answer 2

I think no. Flying Dutchman must be on the water surface.

Answer 3

I tryed. I did't save it. Doesn't work.

Answer 4

Thank you very much! I dont know why it does not work. Android 4 and Android 9 look diferent. See the codes above in my question. May be other devices work well.

Answer 5

To solve this problem, one should use '%' instead of 'px'.

Answer 6

did you solve this? would it also be related to the absolute values, as in
width:240px;
height:200px;

in flying dutchman?

Answer 7

oh! I have always seen it floating, but it made sense for a ghost ship!
The height on the screen of the ipad is over 1000, so 200px is very near to the top. why don't you try 75% instead?

Answer 8

sorry to read that. i would like to help but all my cros platform efforts have been on javascript, I really have never used css much

Answer 9

if you locate a css code related to your problem, I can check how it looks on my ipad

Answer 10

but your css still has px rather than %?

Answer 11

Setting the viewport to make your website look good on all devices:
add this meta element at head section
<meta name="viewport" content="width=device-width, initial-scale=1.0">