Incorrect displayed picture.

Question

This CSS picture incorrect displayed on my smartphone.
https://code.sololearn.com/WQJHlbHah2lt/?ref=app

From the phone it is displayed incorrectly from the computer normally, if I do so it would be correctly displayed on the phone, everything moves to incorrect displayed on the computer.

And I do not know what doing with it.

Moreover, on my old computer on which there have been no updates for a long time this picture looks like how I had conceived it, it is already less legible on the phone, but on the other site, through the compiler on the codepen site, is there a complete mess, but on the other side, an image transformation was being carried out which was originally thought, but which I then completely forgot about since the compiler on the SL simply did not read these lines of code. Tell me the whole point in the compiler? Or in a software update on the device from which you are viewing?

Answer 1

This is because you use position: absolute in your code and the screen width of phone is different from the pc
You just need to make your phone to be in landscape view and the problem is solved
Or you can get some idea from https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Hope this helpful! Programming is fun! 🤗😄