'HTML/CSS that worked in chrome looks all mangled up in firefox

So I am trying to create this success modal box which looks absolutely fine in Google Chrome but completely breaks in Firefox. Can I please get some help with what I am doing wrong and how can I make my front end code cross-browser compatible.

.close-button {
  float: right;
  top: -24px;
  right: -24px;
  color: black !important;
  margin-bottom: -2.5rem;
}

#checkMarkContainer {
  text-align: center;
}

#checkMarkIcon {
  font-size: 13.5rem;
  color: green;
  width: 100%;
  text-align: center;
  display: contents !important;
}

#successTxt {
  text-align: center;
  font-size: 3.8rem;
}

#subHeading {
  text-align: center;
}

.linksContainer {
  margin-bottom: 1rem;
  background-color: white;
}

.linkIcons {
  font-size: 5.5rem;
  color: #105b63;
  display: contents;
}

.linkBtn {
  float: right;
  background-color: #105b63;
  color: white;
  font-weight: 800;
}

.close-button:focus {
  outline: none;
}
<div class="container-fluid">
  <button mat-icon-button class="close-button" [mat-dialog-close]="true">
    <mat-icon class="close-icon">close</mat-icon>
  </button>
  <div class="row">
    <div class="col-12">
      <div id="checkMarkContainer">
        <mat-icon id="checkMarkIcon">check_circle_outline</mat-icon>
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-12">
      <h1 id="successTxt">Success!</h1>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-12">
      <h2 id="subHeading"> What do you want to do next?</h2>
    </div>
  </div>
  <div class="row mt-3 linksContainer">
    <!-- Link 1 - start -->
    <div class="col-4">
      <div class="row">
        <div class="col-12 text-center">
          <mat-icon class="linkIcons"> vpn_key</mat-icon>
        </div>
        <br>
        <div class="col-12 text-center">
          <button type="button" class="btn btn-lg linkBtn" routerLink="/keywords" [mat-dialog-close]="true">Grow your
            list
            with keywords</button>
        </div>
      </div>
    </div>
    <!-- Link 1 - end -->

    <!-- Link 2 - start -->
    <div class="col-4">
      <div class="row">
        <div class="col-12 text-center" style="margin-bottom: 1.5rem;">
          <i class="fa fa-bullhorn fa-lg linkIcons"></i>
        </div>
        <br>
        <div class="col-12 text-center">
          <button type="button" class="btn btn-lg linkBtn" routerLink="/campaigns" [mat-dialog-close]="true">Create a
            new
            Campaign</button>
        </div>
      </div>
    </div>
    <!-- Link 2 - end -->

    <!-- Link 3 - start -->
    <div class="col-4">
      <div class="row">
        <div class="col-12 text-center" style="margin-bottom: 1.5rem;">
          <i class="fa fa-bar-chart fa-lg linkIcons"></i>
        </div>
        <br>
        <div class="col-12 text-center">
          <button type="button" class="btn btn-lg linkBtn" routerLink="/reports-dashboard" [mat-dialog-close]="true">Monitor
            campaign in
            Dashboard</button>
        </div>
      </div>
    </div>
    <!-- Link 3 - end -->

  </div>
</div>

Screenshot from chrome

Screenshot of how the same code renders in firefox

Any help would be appreciated. I am still quite noob when it comes to cross browser compatibility.The first screenshot is from chrome and the second one is from firefox.

Chrome version : 100.0.4896.127 Firefox version : 99.0.1

javascripthtmlcsscross-browserweb-frontend


Solution 1:[1]

Are you keeping your browser versions up to date? If the versions are not up to date, there may be differences in how the browsers render the styles.

Solution 2:[2]

If you are having troubles with some certain property for an element you can go to caniuse.com to see what browsers support that property and which don't support it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mr. Sir
Solution 2 Isaac Newton

Related Questions