Center align absolute positioned icon in 767px screen

Issue

This Content is from Stack Overflow. Question asked by Pramod Gangadar

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 class="row connect-with-concierge-row">
                <div class="col contact-mode-col col-xs-12 col-md-4">
          <div class="contact-mode-icon">
            <img src="http://pwp-wordpress/wp-content/uploads/2022/09/emailicon-png.png">
          </div>
          <div class="contact-mode-content">
            <div class="icon-title">SUBMIT QUESTIONS</div>
            <div class="icon-description" 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 class="center-xs connect-with-concierge-cta">
              <a id="btn" class="btn" role="button" target="" title="Complete Form">
                Complete Form              </a>
            </div>
                      </div>
        </div>
                <div class="col contact-mode-col col-xs-12 col-md-4">
          <div class="contact-mode-icon">
            <img src="http://pwp-wordpress/wp-content/uploads/2022/09/Call_Icon_png.png" ;="">
          </div>
          <div class="contact-mode-content">
            <div class="icon-title">TALK TO AN EXPERT</div>
            <div class="icon-description" 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 class="center-xs connect-with-concierge-cta">
              <a href="#" class="btn cta-btn-purple" 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.

enter image description here

Here is the page



Solution

Check the Answers

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?