/* icon sect*/
.social {
margin-top: px;
padding: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}
.social li {
list-style: none;
float: left;
margin: 0px;
width: 60px;
height: 10px;
line-height: 60px;
text-align: center;
background: #;
border-radius: 50%;
font-size: 50px;
position: ;
transition: .5s ease-in-out;
color: #004d26;
z-index: 1;
}
.social li:before {
content: '';
width: 100%;
height: 100%;
position: ;
top: 0;
left: 0;
background: #ff003b;
border-radius: 50%;
transform: scale(0);
transition: .5s ease-in-out;
z-index: -1;
}
.social li:hover:before {
transform: scale(.9);
}
.social li:hover {
color: #979FA8;
}
Hello there! I'm facing a little challenge where my font awesome icons seem to move when I click and hold at the bottom of my web page and pull up to minimize the screen. I am looking for a solution to keep my icons in their place without any movement. Your assistance is greatly appreciated! If this query has been addressed before, I apologize for the repetition as I have not been able to find a fix.