The problem is absolute positioning. If you use absolute positioning, you break the links of your div from your page (if no relative positioning exists in parent).
position: absolute It looks the first element which has a relative position on parent level and it adjusts its position accordingly to the relative element. If no relative element exists in the parent tags, it adjusts its position accordingly to the page.
Try to give a
position: relative;
to your x2 and try again. If you want to center things, you must give the top position like
top: calc(50% + "height of header");
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.
what is your itnended layout? I’m pretty sure that you ahve an easy layout in mind where an absolute positioning is the wrong approach.
I am trying to make sure that if the window is made extremely small it doesn’t overlap the header as it’s doing now.
that is the job of media queries. You adjust your design accoording to different screen sizes. For example if you ahve 3 buttons in one row, media queries can change the layout that they are dispalyed below each other after going below a preset screen width. Thats why I highly recommend to start with a drawin of your intended layout for different screen sizes. Thats actually how professional start designing a website aswell. They start with a simple drawin for different screen sizes.
@RatneshNagi hello you just need text align center remove all the css it will be responsive
Thank you for the response, Cemil!! I tried to change the position to relative however it didn’t work. I am trying to make sure that if the window is made extremely small it doesn’t overlap the header as it’s doing now. Any other suggestions?
Maybe you can give the sizes with percentages. I don’ t know much about your project
