Set your chrome browser to developer mode and choose iPhoneX from the options and change your below code as required, I couldn’t do it because you didn’t post the html for it,
take in consideration to keep the main settings you added earlier in your page that is targeting your other devices if it works well leave it as is just add the below media query to your code and change the parameters as per your needs..
/this settings for the iPhoneX media size/

@media only screen and (max-width: 375px) {

/*change your code parameters below as required*/
.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN, .GaugeMeter B {

  position: Absolute;
  text-align: Center;
  color: #323232;
  font-weight: 100;
  font-family: "Open Sans", Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}/*end of your css code*/

}/*end of media query*/

One tangential note: while it’s true that CSS properties and values are case-insensitive, it’s nearly universally standard practice to keep them lowercase:

.GaugeMeter {
  position: relative;
  text-align: center;
  overflow: hidden;
  cursor: default;
  display: inline-block;
}

It’s a stylistic choice that will benefit you if you’re ever working in a shared codebase or if someone else will inherit your work.

The code functions as expected on most devices. However when it loads on an iphonex (in my case) the text in the middle of the circular gauge sites to the right side (pictures attached).

I want to rebuild the CSS so that it is modern and better suited to being responsive. What changes need to be made?

• https://imgur.com/voeS4FX

Added HTML as requested:

$(document).ready(function(){
		$(".GaugeMeter").gaugeMeter();
	});

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter span,
.GaugeMeter b {
  position: Absolute;
  text-align: Center;
  color: #323232;
  font-weight: 100;
  font-family: 'Open Sans', Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://raw.githack.com/Mictronics/GaugeMeter/master/GaugeMeter.js"></script>

<div class="col-lg-3 col-sm-12 text-center">
  <div class="GaugeMeter gaugeMeter" id="GaugeMeter_1" data-size="200" data-text="20" data-color="#f04723" data-back="Silver" data-width="15" data-style="Arch" data-stripe="2" data-animationstep="100" data-animate_gauge_colors="1" data-animate_text_colors="1"
    data-label="Stock BHP" data-label_color="#323232" data-id="GaugeMeter_1" style="width: 200px;">
    <span style="line-height: 200px; font-size: 44px;">190</span><b style="line-height: 276.923px; color: rgb(50, 50, 50);">Stock BHP</b><canvas width="200" height="200"></canvas></div>
</div>