I am new to web development.... please suggest me some solution for this issue I am using 'vw' for width and 'vh' for height but its not working well when i am opening my website in mobile and when i am opening website in laptop and opening tab of inspection my websites design goes up ,so i want so solution for solving this issue
I am trying this but its not working properly when i am open my inspection tab of browser ,Its change size according to view port size...please help me for solve this issue ...thank you....
below is HTML Code:- `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>
iNotebook
</title>
</head>
<body>
<div class="Navbar">
<nav>
<ul type="none">
<h1>iNotebook</h1>
<a href="">Create Notes</a>
<a href="">My Notes</a>
</ul>
</nav>
<div class="CreatePageLogOut">
<button class="Logout">Log Out</button>
</div>
</div>
<div class="mainAddNotePage">
<div class="secondAddNote">
<h1>Create Notes</h1>
<h5 style="font-size: large; margin-top: 1%;">Title</h5>
<input type="text" id="AddNoteInpute" />
<h5 style="font-size: large;margin-top: 1%;">Description</h5>
<input type="text" id="AddNoteInpute" />
<h5 style="font-size: large;margin-top: 1%;">Tag</h5>
<input type="text" id="AddNoteInpute" />
<div>
<button class="AddNoteButton">Add Notes</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
`
and below is css code:- `
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
.Navbar{
background-color: rgb(28, 28, 172);
height: 8vh;
display: flex;
}
nav ul{
display: flex;
justify-content: space-around;
align-items: center;
height: 8vh;
width: 25vw;
color: white;
}
a{
color: white;
text-decoration: none;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.CreatePageLogOut{
display: flex;
justify-content: flex-end;
align-items: center;
width: 70vw;
}
.Logout{
height: 5vh;
width: 8vw;
background-color: rgb(239, 56, 56);
color: white;
border: solid rgb(171, 163, 249);
border-radius: 8%;
cursor: pointer;
}
.mainAddNotePage{
height: 80vh;
width: 100vw;
display: grid;
justify-content: center;
align-items: center;
}
#AddNoteInpute{
height: 8vh;
width: 25vw;
}
.AddNoteButton{
height: 8vh;
width: 20vh;
color: white;
background-color: rgb(52, 52, 245);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: bold;
}
`
When i am open my inspect then my view port height is changed and when i am open website in mobile and tap on input keyboard is come up and view port height of input element is changed...please help me to solve problem...
This is because
vh&vware units relative to the viewport.vhmeansView-Port Heightwhen you say10vhit means 10% of Viewport Height, the element will use the Size value equivalent to 8% of the Browser View-Port Height. Similarly,vwmeansView-Port Width. So, the results you are having are perfectly normal & not a problem.I would recommend you to use
pxorem&remfor most of the sizing.Like using
8vhfornavis somewhat of a good choice because it will look good covering 8% of the View-Port, but having aninputcovering 8% of View-Port is not recommended. In smaller devices, it will always raise issues.Please Take CSS Length Reference From Here