Kindly set your browser to responsive design at a width of 490px for these effect.I'm trying to make my social icons to remain at the same position when I hover over them. For the first top social icons, when i hover over them, the bottom icons tend to move down. I would like to prevent this and only have them moving down without affecting the other social icons below. I used a padding-top:10px to move down the icons when. Also i am using boxicons.
#contact { background-color: #303841; padding: 140px 0 120px; text-align: center; height: 70vh; /*specifying the height ensures no change even when paddding-top/bottom*/ /* border: 2px solid blue; */}#contact h1 { font-family: Montserrat, sans-serif; color: var(--white-col); font-size: 3.125rem;}.dots { display: inline-flex; width: 8px; height: 8px; background-color: var(--white-col); margin-right: 5px;}#contact p { margin: 20px 0; font-style: italic; color: var(--white-col); font-weight: 300; font-size: 19px;}.social-icons { /* border:2px solid red; */ display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 20px 0; /* margin-bottom: 50px; */}.social-icons i { /* border:2px solid black; */ display: inline-block; color: var(--white-col); font-size: 23px; font-family: "Open Sans", sans-serif;}.social-icons i:hover { transform: translateY(10px); transition: ease-in-out; transition-duration: 0.90s;}footer { border-top: 3px solid rgb( 231, 76, 60); padding: 25px 0; text-align: center; background-color: #303841;}<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><link rel="stylesheet" href="./css/portfolio.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"><body><section id="contact"><h1>Let's work together<div class="dots"></div><div class="dots"></div><div class="dots"></div></h1><p>How do you take your coffee?</p><div class="social-icons"><i class='bx bxl-facebook-square'> Facebook</i><i class='bx bxl-github'> Github</i><i class='bx bxl-twitter'> Twitter</i><i class='bx bxl-gmail'> Send a Mail</i><i class='bx bxs-phone-call'> Call me</i></div></section><footer><p>Made by <i class='bx bxs-heart'></i> Dreamer </p></footer></body></html>