Computer to phone differences

Question

Display/layout is different and didnt know if anyone could tell me why?
I guess what I'm saying is that I made a quick code on my phone and the layout and proportions looked good. Then came home and pulled it up on the computer and everything was jumbled up so I fixed it on the computer. Looked again later on my phone and it was bad. so I suppose I can have one or the other that is aesthetically pleasing? lol
https://code.sololearn.com/Wzot26GUCVot/?ref=app

Answer 1

Just in general (I've been down the layout path before) this is just the beginning, I'm afraid. Designing tools (like publishers) can help you deal with differences automatically, but you're probably going to have to practice with the block model, get more involved with the layout attributes and use more developer tools (for example, Firefox and Chrome, I believe have screen size simulators and 3D layout block viewers where you can fly around your invisible layout to see what's wrong).
That said, if most of your audience has new-enough browsers, I hear that CSS Grid Layout (built in to recent browsers) makes cross-platform layout design much more wonderful.
https://css-tricks.com/snippets/css/complete-guide-grid/
The article also links to Flexbox Layout, intended for smaller displays and supported back to Android 4.4. It includes some nice layout discussion and @media examples (for screen size adjustment).

Answer 2

awesome answer! thank you so much!