My website has three different title header text in three lines on the right side of the home screen. Which is the picture:https://im.ge/i/coverpage.Q1CmhX and below this three header text (The titles are in the background of the homepage.), I have placed three "Shop Now" buttons. Pictures like https://im.ge/i/Q1C4aJ but when I look at different sized screens, it looks like this: https://im.ge/i/Q1EXXK.
Any help would be appreciated, Thanks in advance.
a.btn.hero__btn.btn1 {
margin-top: 103%;
}
a.btn.hero__btn.btn2 {
margin-top: 112%;
}
a.btn.hero__btn.btn3 {
margin-top: 90%;
}
.page-width.text-center {
top:6%;
left: 80%;
position: absolute;
}
.hero-fixed-width__content .btn{
position:relative;
font-size:20px;
border: black 2px solid!important;
color: black!important;
font-weight:bold;
background:transparent!important;
}<div class="hero-fixed-width__content">
<div class="page-width text-center">
<a href="" class="btn hero__btn btn1">SHOP NOW </a>
<br/>
<a href="" class="btn hero__btn btn2">SHOP NOW </a>
<br/>
<a href="" class="btn hero__btn btn3">SHOP NOW </a>
</div>
</div>