Is there a way to prevent the elements of the page from resizing when resizing the browser window? For example, I want the width and height of the ‘rectangle’ element to stay the same no matter the size of the browser window.
<!DOCTYPE html>
<html>
<head>
<title>Kirjautuminen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
font-family: Roboto, sans-serif;
font-size: 1vw;
margin: 0;
padding: 0;
background-color: black;
min-height: 100vh;
height: 1000px;
width: 1000px;
}
.username input {
position: absolute;
left: 50vw;
top: 45vh;
transform: translateX(-50%);
width: 250px;
height: 20px;
}
.password input {
position: absolute;
left: 50vw;
top: 50vh;
transform: translateX(-50%);
width: 250px;
height: 20px;
}
.modern-button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 150px;
margin: 0 10px 10px 10px;
}
.modern-button:hover {
background-color: #ddd;
}
.submit-button input{
position: absolute;
left: 50vw;
top: 55vh;
transform: translateX(-50%);
width: 5vw;
height: 3vh;
}
img {
width: auto;
height: 100vh;
display: block;
margin: 0 auto;
position: absolute;
left: 0;
top: 50;
z-index = -1;
}
label {
color: white;
margin-right: 100px;
}
.header {
position: relative;
left: 50vw;
top: 20vh;
text-align: center;
transform: translateX(-50%);
z-index: +1
}
.paragraph1 {
position: absolute;
left: 50vw;
top: 39vh;
transform: translateX(-50%);
z-index: +1
}
.rectangle {
position: absolute;
width: 400px;
height: 23vh;
background-color: #808080;
border-radius: 30px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1 {
color: white;
font-size: 50px;
}
h2 {
color: white;
}
p {
color: white;
font-size: 20px;
}
::placeholder {
font-size: 20px;
text-align: left;
}
</style>
</head>
<body>
<div style="min-width: max-content; min-height: max-content;">
<div class = "rectangle"></div>
<form action="/home" method="POST">
<div class = "username">
<input type="username" id="username" name="username" style="border-radius: 5px; padding: 0.25%;" placeholder="Käyttäjätunnus"><br>
</div>
<div class = "password">
<input type="password" id="password" name="password" style="border-radius: 5px; padding: 0.25%;" placeholder="Salasana"><br>
</div>
<div class = "submit-button">
<input type="submit" value="Kirjaudu">
</div>
<div class = "header">
<h1>mywebpage.net</h1>
</div>
<div class = "paragraph1">
<p>Kirjaudu sisään:</p>
</div>
</form>
</div>
</body>
</html>
I’ve tried using pixels instead of percentages, but it obviously didn’t work. I also tried putting the elements inside of a div-element and setting the width and height of the div-element to 1000px, but it didn’t work either. The solution must be very simple, but I was unable to find the answer online, nor could Chat GPT give me the answer. Thanks!
2
Answers
CSS has ‘max-width’, ‘max-height’, ‘max-inline-size’ and ‘max-block-size’ properties – as well as the inverse for the minimum size things can be. If you define it’s size in px for both min and max, it shouldn’t be able to change size regardless if you increase or decrease the size of your browser window.
Try the below instead:
Parent elements should be %age height / width (in this case the body), and then set the container element to be a set width, with auto margin to center it. Then you can set how far from the top of the screen you want it as long as the positioning set to relative (and the parent has some sort of positioning set also). That way everything in the container won’t resize when you reposition the screen. I also tidied up some of the css – you shouldn’t have so much absolute positioning and transforming for simple input elements – just use margin / padding or display:flex instead if necessary.
Hope that helps.