When the window size is small(or while using it on some small screen phones) the buttons are overlapping the heading. Here's the code:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.x2 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center
}
<body>
<div style="background-color: #E9ECEF">
<br><br>
<center>
<h1>Survey Management System</h1>
<center>
</div>
<div class="x2">
<p><button Class="btn btn-warning" onclick="document.location = 'user/registration.html'">Register</button></p>
<p><button Class="btn btn-warning" onclick="document.location = 'user/Login1.html'">Login</button></p>
<p><button Class="btn btn-warning" onclick="document.location = 'admin/alogin.html'">Admin Login</button></p>
</div>
I am a beginner and any help regarding this will be highly appreciated. Any other suggestion that you find helpful are also welcomed.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
