Page Layout (HTML)

Question

Hey Guys.
I have this simple page that display well in PC, but when I run it on Mobile Phone it looks weird.

I noticed that if I set my screen to auto rotate and view the page in landscape mode it shows up correctly.

Did I miss anything, What is it, and how can I fix it so that the page adjust automatically to anymode (portrait or landscape)

THANKS IN ADVANCE.
.
note: I embedded the style into the HTML code for ease of copy.

code link below

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

Answer 1

Try to add media queries for mobile screen:

@media screen and (max-width:678px) {
body {
padding: 0;
}
img {
width: 200px;
}
}

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

Answer 2

Try learning Bootstrap CSS framework for responsive designs(designs that adjust itself according to screen dimensions). Otherwise you will be tired of fixing it for different resolutions 😅 . Even if you fix it for mobile view then you will worry about tablets. Bootstrap CSS takes care of it.
There are other CSS frameworks also but this one is most popular and easy for beginners.

Example section with code snippets is very helpful

link : http://getbootstrap.com

Answer 3

thanks