The absolutely positioned icons in the two columns need stay center aligned across all resolutions. Below is the media query I tried to align the icon in mobile device. It is not accurate in any of the resolutions. Could you please help correct the CSS.

@media screen and (max-width: 767px) {
  .contact-mode-icon {
    top: -4rem;
  }
  .contact-mode-col {
    margin-bottom: 6rem !important;
  }
}

HTML:

<div >
                <div >
          <div >
            <img src="http://pwp-wordpress/wp-content/uploads/2022/09/emailicon-png.png">
          </div>
          <div >
            <div >SUBMIT QUESTIONS</div>
            <div  style="height: 106px;"><span>Fill out this form </span>&nbsp;with your questions or requests and we'll respond ASAP (maximum one business day)</div>
                        <div >
              <a id="btn"  role="button" target="" title="Complete Form">
                Complete Form              </a>
            </div>
                      </div>
        </div>
                <div >
          <div >
            <img src="http://pwp-wordpress/wp-content/uploads/2022/09/Call_Icon_png.png" ;="">
          </div>
          <div >
            <div >TALK TO AN EXPERT</div>
            <div  style="height: 106px;"><span>Prefer to schedule a call? </span>&nbsp;Meet live with a member of our Gift Concierge team at a time most convenient for you</div>
                        <div >
              <a href="#"  role="button" target="" title="Schedule a Meeting">
                  Schedule a Meeting              </a>
            </div>
          </div>
                  </div>
      </div>

CSS:

.contact-mode-icon {
  position: absolute;
  top: -3rem;
  left: 9rem;
}
.contact-mode-content {
  border: 2px solid;
  border-color: #A6A2A3;
  padding-top: 3rem;
  padding-bottom: 1rem;
  max-width: 342px;
}
.contact-mode-content .icon-title {
  font-family: 'Roboto';
  font-weight: bold;
  text-transform: capitalize;
  font-size: 1.2rem;
  margin: 1rem auto;
}
.contact-mode-content .icon-description {
  font-family: 'Roboto';
  font-size: 1rem;
  padding: 0 1.1rem;
  margin-bottom: 1rem;
}
.contact-mode-content .icon-description span {
  font-weight: bold;
}
.contact-mode-content .btn {
  padding: 1rem;
}
.connect-with-concierge {
  margin-top: 3rem;
} 

The image below shows misaligned icon.

Here is the page

CodePudding user response：

Your icon isn't centered properly in normal resolution - check inspector tool and see that content of the column is left aligned since you set its max width but the div remains the same size. Now to your question: you can easily fix that with transform: translate property like this:

.contact-mode-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
} 
.contact-mode-content {
  #your code that you have already
  margin: 0 auto;
}

You will also need to delete that media query fix for content-mode-icon.