How to make a button's postion on the page responsive

Question

I am working on this project mainly utilizing bootstrap. I have added a basic banner below navbar. On top of this banner I have also added one button that will supposedly help users to reach the contact form. The main issue with this button is that, even though it seems ok after I found its current screen-centering (maybe still not exactly centerin), when the screen gets smaller it looks completely distorted. What might be the best solution to keep this button's position unchanged regardless of the user's device.

Here is the html for the banner section and the button:

 <div class="img-wrapper">
    <img style="width: 100%; height: 100%" src="https://images.unsplash.com/16/unsplash_5263605581e32_1.JPG">
    <a class="btn btn-outline-secondary" href="#" role="button">Contact me </a>
 </div>

and this the css I have found and applied:

.img-wrapper {display:inline-block;position:relative;}
.btn {position:absolute;right:47%;top:90%;}

Answer 1

You can use bottom instead of top along with transformX for your horizontal positioning. This will center the button horizontally centered and since you're avoiding a percentage by using a fixed height from the bottom of the image also keep the button over the image when the viewport is reduced.

Working Example:

 .img-wrapper { position: relative; } .btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="img-wrapper"> <img class="img-fluid" src="https://images.unsplash.com/16/unsplash_5263605581e32_1.JPG"> <a class="btn btn-outline-secondary" href="#" role="button">Contact me </a> </div>