I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen.
What could be causing this issue, and how can I resolve it?
<div class="wrapper">
<form action="">
<h1>Register</h1>
<div class="input-box">
<input type="text" placeholder="first name" required>
</div>
<div class="input-box">
<input type="text" placeholder="last name" required>
</div>
<div class="input-box">
<input type="password" placeholder="password" required>
</div>
<div class="input-box">
<input type="password" placeholder="confirm password" required>
</div>
<div class="input-box">
<div class="custom_select">
<select>
<option value="" disabled selected>Select gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
</form>
</div>
.wrapper {
width: 500px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(20px);
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
color: #fff;
border-radius: 10px;
padding: 30px 40px;
margin: 10% auto;
box-shadow: 0px 10px 20px rgba(230, 4, 4, 0.1);
transition: box-shadow 0.3s ease;
margin-top: 285px; /* Added this line to move the wrapper down */
}
.wrapper:hover {
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
}
.wrapper h1{
font-size: 36px;
text-align: center;
}
.wrapper .input-box{
position: relative;
width: 100%;
height: 50px;
margin: 30px 0;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
outline: none;
border: 2px solid rgba(177, 177, 177, 0.2);
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 45px 20px 20px;
}
.wrapper .input-box input::placeholder {
color: rgba(0, 0, 0, .4)
}
.input-box input:hover{
border: 2px solid rgba(255, 255, 255, 0.8);
transition: border 0.3s ease;
}
.wrapper .remember-forgot{
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}
.remember-forgot label input {
accent-color: #fff;
margin-right: 3px;
}
.remember-forgot a{
color: #fff;
text-decoration: none;
}
.remember-forgot a:hover{
text-decoration: underline;
}
.wrapper .btn{
width: 100%;
height: 45px;
background-color: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight: 600;
}
.wrapper .register-link{
font-size: 14.5px;
text-align: center;
margin-top: 20px;
margin: 20px 0 15px;
}
.register-link p a{
color: #fff;
text-decoration: none;
font-weight: 600;
}
.register-link p a:hover{
text-decoration: underline;
.custom_select select {
width: 100%;
padding: 10px 17px;
outline: none;
background: transparent;
border: 2px solid rgba(211, 211, 211, 0.2);
border-radius: 40px;
font-size: 16px;
color: #b3b3b3;
}
.custom_select select:hover{
border: 2px solid rgba(255, 255, 255, 0.8);
transition: border 0.3s ease;
}
I tried using meta tags like:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1">
But unfortunately, I didn't see any visible changes.