CODEWITHSUNDEEP
htmlcssbootstrap-4
broadband
broadband

Reputation: 3498

Bootstrap 4 font size em differs in Mozilla Firefox and Google Chrome

I'm using Angular 8 with bootstrap v4.4.1 (package.json -> "@ng-bootstrap/ng-bootstrap": "^5.2.1",). My requirements:

I thought that the second point is solved by bootstrap as well. The problem is this:

<button type="button" class="btn btn-outline-dark menu-item">
  <i class="fas fa-align-center"></i>
</button>

Chrome shows button twice as large as Mozilla Firefox. I then added Bootstrap Reboot (as a normalizes, but it doesn't change anything)

This is my whole global styles.scss:

@import "~bootstrap/dist/css/bootstrap-reboot.css";
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~@fortawesome/fontawesome-free/css/all.css";
@import "variables.scss";

html,
body {
  height: 100%;
  background-color: $gray-light;
}

.menu-item {
  font-size: 1.5em;
}

How do I get that font size renders equally in Firefox and Chrome. Specifying px works, but latest trends go to em or rem. Doesn't Reboot overrides the em?

Setting this works, but not really sure this is the best approach:

html,
body {
  height: 100%;
  background-color: $gray-light;
  font-size: 16px;
}

Upvotes: 1

Views: 1242

Answers (2)

Anwesh Mohapatra
Anwesh Mohapatra

Reputation: 194

In your styles.scss:

html,
body {
  height: 100%;
  font-size:100%;
  background-color: $gray-light;
}

Make sure that none of the browsers are zoomed in Ctrl+0 to reset zoom. Font sizes in different browsers are different a little bit but they shouldn't be too different.

Upvotes: 0

broadband
broadband

Reputation: 3498

The problem is default font size defined by Mozilla Firefox browser.

enter image description here

If you set font-size: 100% it will use default size defined by the browser. You have to set font-size in pixels. From there on you just use <em> or <rem>.

   html,
body {
  height: 100%;
  background-color: $gray-light;
  /* Browser settings can override font-size, therefore we set it here. This is also
  with accordance with bootstrap https://getbootstrap.com/docs/4.0/content/typography/ */
  font-size: 16px;
}

.my-div {
  font-size: 2em; 
}

Upvotes: 2

Related Questions