I'm having trouble with this code not resizing correctly when the screen size is reduced. Please note that this link will be placed on top of an image.
<!--HTML-->
<div class="link">
<a class="learn_more" href="link_here">Learn More</a>
</div>
/*css*/
a.learn_more {
width: 100%;
max-width: 131px;
text-align: center;
font-size: 17px;
border-radius: 10px;
position: absolute;
transform: translate(60%, 430%);
text-decoration: none;
display: inline;
padding-top: 8px;
padding-bottom: 11px;
color: white;
background: #75c1de;
border: white;
border-style: solid;
}
a.learn_more:hover {
text-decoration: none;
color: #75c1de;
background: white;
border: #75c1de;
border-style: solid;
transition-duration: 0.5s;
}