Why does Sololearn show my code differently ?

Question

I just made a simple web code and I tested it on my laptop's browser and my mobile browser and the code was responsive for both of them and it was working well...but when I tried to run the code in Sololearn at code playground it gave me a different result on my laptop and on my mobile phone !

Answer 1

there are some notes :
- Try to tie your elements using patrilineal gradient (nesting ).
- resize every element separately

You made a good step setting a direct parent for every child but do that for the first h1 , too .

/*Note : sololearn code playground differs because the dimensions are stretchy */

Here is your code :

https://code.sololearn.com/WmlNrzbq3MMn/?ref=app

Answer 2

Bono It's looking perfect in my device. Each device has different size. Laptop size is different, mobile size is different, tablet size is different. There is more variations of size in Mobiles so to make responsive website or code, you need to learn about @media attributes and also try to use % rather than px. So your code will automatically adjusts on different size of devices.

To avoid this problem use Chrome browser for web development where you can check your code on different screen size.

Answer 3

𝐊𝐢𝐢𝐛𝐨 𝐆𝐡𝐚𝐲𝐚𝐥 it should be like this https://ibb.co/chvVKck
But it looks like this
https://code.sololearn.com/W6xhAUdGgYXn/?ref=app

Answer 4

AJ Anant thanks!
The code works on my mobile browser fine but it works differently at Sololearns app.

On my mobile browser :
https://ibb.co/chvVKck

On Sololearn: https://ibb.co/t470jxP

could media attributes slove this?