How to create a website suitable for phone screen ?

Question

I have created a website.It is working properly in laptop but when it comes to phone doesn't fit to phone screen.

Answer 1

You have to specify inside of css that what styles should change if the viewport gets to a specific point, such as,

.navbar {
padding:10px;
}
@media (max-width: 380px) {
.navbar {
padding: 0;
}
}
So the padding would decrease to 0 when window gets smaller.

Use your console in the browser dev tools to adjust the width of viewport, and to check the width where things start to get messy, and add a media query for that.

Answer 2

Read about meta tag view port.. May help you..

Edit:
https://www.w3schools.com/css/css_rwd_viewport.asp#:~:text=The%20viewport%20is%20the%20user's,design%20and%20a%20fixed%20size.

Answer 3

Thank you

Answer 4

Use mediaquery for responsive web design.
Or
Relative unit(%,rem) based elements to get multiple screen friendly web page

Answer 5

I think u use the bootstrap which solve ur problems....

Answer 6

U must use media queries. U can write them inside head tag.

for example:
<link rel="stylesheet" href="mobile-style.css" media="screen">

Hope my answer can be useful. HAPPY CODING WITH JS 😊 { }