The problem:

I would like my text stroke to not overlap on mobile the white that is the text color / text fill color. If you look at the following pictures the first picture is mobile and the second picture is web. I would like the header text to always look like the second image.

I have tried:

• All combinations of the following:
  1. I have tried setting fill to the white color
  2. I have tried setting the fill to transparent and the regular text color to white
  3. No fill and text color to white
• I have tried using :after sudo element to display the fill color but I am not experienced enough to get that to work

Code:

<h1
            className={`${Styles.minHeightForSymmetry}`}
// this just sets min-height to 9.7rem @min-width768px
            style={{
              textAlign: "center",
              fontSize: "calc(8px + 1vw)",
              fontFamily: "sans-serif",
              color: "white",
            }}
          >
            <span
              style={{
                fontFamily: "sans-serif",
                fontSize: "calc(18px + 1vw)",
                color: "white",
              }}
              className={`${Styles.letterBorder}`}
            >
              Quick Overview of WAR Zone
            </span>{" "}
            <br /> The world&apos;s most fast and efficient match making
            software
          </h1>

/* hope fully this will solve the porlem of the stroke overlappong the white text */
.letterBorder {
  font-weight: bold;
  font-family: Arial, sans-serif;
  -webkit-text-stroke: 2px #000; /* for Chrome and Safari */
  text-stroke: 2px #000; /* for other browsers */
  -webkit-text-fill-color: white; /* for Chrome and Safari */
  text-fill-color: white; /* for other browsers */
  text-align: center;
  text-wrap: balance;
  color: transparent; /* Hide the original text color */
}

I apologize for large images, but it makes it easier to see the header text

>Solution :

.letterBorder {
    <YOUR SAME STYLES>
    color: white;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

Try this out and let me know if it works. It basically creates a fake shadow that will act as an outline.