I am having trouble centering a row of 3 social media icons in the middle of my popup modal and have it actually be responsive.

My failed method is adjusting the icons' "left" property by individual percentages..

Every time I think I have it centered, I test it out on a different screen size and it's too much to the right or too much to the left.

<section >

    <div >
        
        <div >
            <div >
                
            </div>
        </div>

        <div >
            <div >&times;</div>
            <h1>FOLLOW US ON SOCIAL MEDIA</h1>
            <p>@gravitasdesign</p>
            <h3>Learn about our current and upcoming projects.</h3>
             

            <a href="#"> <i id="popup-facebook" ></i></a>
            <a href="#"> <i id="popup-instagram" ></i></a>
            <a href="#"> <i id="popup-linkedin" ></i></a> 
        </div>

    </div>
    
</section>

.popup-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1099;
    background-color: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}


.popup-modal.show {
    visibility: visible;
    opacity: 1;
}



.popup-box {
    background-color: #fff;
    width: 750px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    border-radius: 2.5px;
}


 .popup-image-container{

    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
}

.popup-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(images/popupmodal.jpg);
    background-size: cover;
   background-position: left;
   animation: zoomInOut 50s linear infinite;
}


@keyframes zoomInOut{
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
}


.popup-content {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 30px;
}

.popup-content h1{
    font-family: interstate, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    text-align: center;
    line-height: 55px;
    word-spacing: 4px;
    color: #300600;
}

.popup-content h3{
    font-family: interstate, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #300600;
    padding-bottom: 35px;
}


.popup-content p {
    font-family: 'interstate', sans-serif;
    font-weight: 700;
    padding-top: 30px;
    padding-bottom: 35px;
    text-align: center;
    font-size: 28px;
    line-height: 42.5px;
    color: #300600;
    
}

#popup-facebook, #popup-instagram, #popup-linkedin{
    position: relative;
    left: 9.5%;
    font-size: 32px;
    margin-right: 24px;
    margin-left: 24px;
    transition: 0.2s ease-in-out;
}


#popup-facebook{
    color: #4267B2;
}

#popup-linkedin{
    color: #0077b5;
}

#popup-instagram {
    color: #0077b5; 
}


.popup-close {
    font-size: 32px;
  position: absolute;
  left: 96%;
  top:  1%;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  color: #300600;
}

CodePudding user response：

Here you can try this logic

 #popup-facebook,
    #popup-instagram,
    #popup-linkedin {
      position: relative;
      left: 9.5%;
      font-size: 32px;
      margin-right: 24px;
      margin-left: 24px;
      transition: 0.2s ease-in-out;
    }

    #popup-facebook {
      color: #4267b2;
    }

    #popup-linkedin {
      color: #0077b5;
    }

    #popup-instagram {
      color: #0077b5;
    }

    .popup-close {
      font-size: 32px;
      position: absolute;
      left: 96%;
      top: 1%;
      cursor: pointer;
      transition: 0.2s ease-in-out;
      color: #300600;
    }

    .popup-content {
      display: flex;
      flex-direction: column;
    }
    .icons-box {
      display: flex;
      justify-content: center;
    }

<section >
      <div >
        <div >
          <div ></div>
        </div>

        <div >
          <div >&times;</div>
          <h1>FOLLOW US ON SOCIAL MEDIA</h1>
          <p>@gravitasdesign</p>
          <h3>Learn about our current and upcoming projects.</h3>

          <div >
            <a href="#"> <i id="popup-facebook" ></i></a>
            <a href="#">
              <i id="popup-instagram" ></i
            ></a>
            <a href="#"> <i id="popup-linkedin" ></i></a>
          </div>
        </div>
      </div>
    </section>

:

CodePudding user response：

Any particular reason why you are not using display: flex to center the icons? I would create a div container to hold the icons and set that to display: flex; with justify-content: center; (or you can play around other justify-content values to match your expected output).