How to perfectly center an absolute positioned icon on a 767px screen

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>&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 displays the misaligned icon.

https://i.stack.imgur.com/8KOkh.png

Visit the page here.

htmlcssfrontend

Answer №1

The alignment of your icon seems off in normal resolution - inspect the column with the inspector tool and note that the content is left-aligned while the div remains the same size. Regarding your query, you can rectify this by using the transform: translate property as shown below:

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

Additionally, remove the media query fix for content-mode-icon.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to make the submenu display underneath the main menu

Click here to view the menu It is important to note that you may need to expand the Result Box in order to see the full menu. The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. ...

javascriptjqueryhtmlcssmenu

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...

javascripthtmlcssimagehtml-lists

Managing input jQuery with special characters such as 'ä', 'ö', 'ü' poses a unique challenge

Hey there, I'm running into a bit of trouble with my code and I can't figure out why it's not working. Here's a brief overview: I created my own auto-suggest feature similar to jQuery UI autosuggest. Unfortunately, I'm unable t ...

javascriptjqueryhtmlstringencoding

Can a JavaScript function be used with images to operate across multiple elements?

How can I make a function work on multiple elements? let image = document.getElementById("opacityLink"); image.onmouseover = function() { image.style = "opacity:0.9"; }; image.onmouseout = function() { image.style = "opacity:1"; }; <div class=" ...

javascripthtmlcssimage

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

I am currently utilizing HTML, Javascript, and bootstrap to develop a web application. However, I have encountered an obstacle. When using the code document.getElementById("input here"), it only returned an array of 0. My goal is to retrieve data from an A ...

javascripthtmljsontwitter-bootstrap

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

javascriptcsswebreactjsstyling

Techniques for ensuring input validity using JavaScript

One of my form inputs is required: <input type="text" id="input-id" required> After the user submits it, I send the value using ajax and then clear it with $("#input-id").val(""). However, after this action, the input appears invalid. I want to ...

javascripthtmlcssfrontendrequired

What is the strategy used by jQuery to select elements by class name?

Is there a "getElementsByClass" function in JavaScript? If not, how does jQuery manage to do it without looping through all elements which would be very inefficient? Also, how can I specify CSS for elements with two or more classes? <a class="one two ...

jquerycssdom

What is the reason behind Firefox opting for a 2x image while Chrome goes for a 1x image when the devicePixelRatio is 1

When deciding between 1x and 2x options: Firefox will opt for 2x if devicePixelRatio is less than 1 Chromium will choose 2x if devicePixelRatio is less than 1.5 Testing this in Safari is tricky as devicePixelRatio remains constant even when scaling t ...

htmlimagefirefoxchromiumsrcset

Can you help me adjust the height of my banner and center its content vertically?

Looking to create a custom banner for my website, specifically at the top with dimensions of 700px width and 80px height. The code snippet is as follows: <div class="container-narrow" style="heigth: 80px;"> <img src="#" width="52" ...

htmlcss

Alignment of Material-UI dialogue buttons on the left side

I have a Dialog containing three buttons as shown below: https://i.stack.imgur.com/T6o35.png Here is the JSX code: <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} > <Button classes={{ root: this.props ...

javascripthtmlcssmaterial-ui

Detecting collisions on a tile map using only JavaScript

Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...

javascripthtmlcsscanvas

Image tinting color picker tool (using HTML, CSS, and web technologies)

I'm currently exploring ways to apply a filter or tint on top of an image using CSS/HTML or some lightweight solution. For example, Ideally, my goal is to only have one image displayed on the page and overlay it with a transparent filter based on a ...

jqueryhtmlcsscolorspicker

Having trouble fetching website data using Selenium in Python

I'm encountering an issue when attempting to extract a table from a dynamic webpage using selenium in Python. Here is the code snippet I am currently using: from selenium import webdriver url = 'https://draft.shgn.com/nfc/public/dp/788/grid&apos ...

pythonhtmlselenium-webdriverweb-scrapingdynamic

Form using Ajax technology, including two drop-down menus sourced externally

Is there a way to automatically populate a second drop-down list with all models once a selection is made in the first drop-down on a form? Below is the code snippet: <form> <div class="landing_quote_left"> ...

phphtmlajaxformsjquery

Panel div fails to show visNetwork visualization

After experimenting with shinyLP for creating html elements and crafting network diagrams using visNetwork, an interesting observation was made. When visNetwork is placed in a well panel or without any panel at all, it displays properly. However, the issue ...

htmlrshinygraph-visualizationvisnetwork

Adjust the size of iCheck jQuery radio buttons

I have implemented the iCheck Plugin for radio buttons in Angular Directive, but I am facing an issue with resizing the radio button to a smaller size. Does anyone have any suggestions or solutions for this? ...

cssangularjsicheck

Configuring express for serving static CSS and JavaScript files

I'm currently facing issues with setting up the middleware of my application to serve static files like css and js. My goal is to include css and js files from the public directory in my index.html. You can view the current file structure here Below ...

htmlnode.jsexpress

Effortlessly glide to the top of the webpage

After dedicating numerous hours to this task and being a newcomer to JavaScript/JQuery, I am still unsure of how to achieve the following: I have implemented a "back to top" anchor link in the footer of my pages that directs users back to the header. I am ...

javascripthtmlcss

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss