The icons positioned absolutely in the two columns must remain center aligned across all screen resolutions. The media query below attempted to align the icon on mobile devices, but it is inaccurate for any resolution. How can I 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> 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> 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 displays the misaligned icon.
https://i.stack.imgur.com/8KOkh.png
Visit the page here.