why my code not fits on computer and landscape screen

Question

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

Answer 1

If you want to handle screen orientation, you need to use @meida

@media only screen and (orientation:portrait)
@media only screen and (orientation:landscape)

BroFarOps©®️™️ has good example code for this:

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

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

Also, you can this demo, which reset position of some elements:

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

For your self learning,
here are some resource about @media

1. Basic Understanding at
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

2. Pratical ways at
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

3. Full details, especially browser compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Answer 2

Ch Wasiq

Hope this tutorial helps

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