+ 3

Page Layout (HTML)

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

15th Nov 2017, 3:32 PM
Keleos William
Keleos William - avatar
3 Answers
+ 2
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
15th Nov 2017, 4:57 PM
Calviղ
Calviղ - avatar
+ 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
15th Nov 2017, 4:00 PM
Shubham Menkudle
Shubham Menkudle - avatar
+ 1
thanks
31st Dec 2017, 5:55 PM
Keleos William
Keleos William - avatar