There seems to be a slight "issue" on my current website where the buttons disappear when the screen resolution is changed to something smaller. Check out this gif for a better understanding: . How can I make sure that the buttons shrink along with the page so they remain clickable on different screen sizes?
Below is the HTML code for the buttons. The CSS for fab, fa-steam-symbol, fa-discord, etc., comes from https://fontawesome.com/ (in case some are not familiar with it).
.awrapper{
align-content:center;
background-size:cover;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
min-height:100%;
ms-flex-direction:row;
ms-flex-line-pack:center;
ms-flex-pack:center;
ms-flex-wrap:wrap;
webkit-align-content:center;
webkit-flex-direction:row;
webkit-flex-wrap:wrap;
webkit-justify-content:center;
}
.media{
font-size:30px;
text-align:center;
padding-top:30px;
}
.media>a{
margin-right:80px;
text-decoration:none;
transition:color 0.5s ease;
}
.media>a#vk{
font-size:35px;
}
.media>a:last-child{
margin-right:0;
}
.animated{
-webkit-animation-duration:2s;
animation-duration:3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
margin: 500px
}
@-webkit-keyframes fadeInUpBig{
from{
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
to{
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUpBig{
from{
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
to{
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUpBig{
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
}
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(2);
transform: scale(2);
}<div class="awrapper">
<div class="media animated fadeInUpBig" style="animation-delay: 5s;">
<a href="BLNAK_LINK/Steam" target="_blank">
<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
<a href="BLNAK_LINK/discord" target="_blank">
<i class="fab fa-discord hvr-grow" title="Discord"></i>
</a>
<a href="BLNAK_LINK/hosting" target="_blank">
<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
</a>
<a href="BLNAK_LINK/TRADEOFFER" target="_blank">
<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
</a>
<a href="BLNAK_LINK/PLAYLIST" target="_blank">
<i class="fas fa-music hvr-grow" title="Playlist"></i>
</a>
</div>
</div>If you notice anything missing or have any questions, feel free to reach out and I'll do my best to provide answers.