CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4cross-browser
Major Productions
Major Productions

Reputation: 6042

Bootstrap 4 - wildly different rendered font sizes in Ubuntu Chrome and Firefox

I'm developing a site on Ubuntu. When I look at it in Firefox, it's a lot smaller than when I view it in Chrome. Screenshots:

enter image description here

enter image description here

Both browsers have their default fonts set to DejaVu Serif at 16px. I haven't messed with Bootstrap's default font size. It's still 1rem.

What's accounting for this discrepancy, and is there a way to further normalize the differences between browsers?

EDIT: My scss, even though it's not relevant, because it was requested:

$theme-colors: (
    "burnt-orange": #fa7334,
    "light-blue": #67e2f5,
    "dark-blue": #006f80,
    "beige": #f5d5bc
);

.header-icon {
  font-size: 1.4rem;
}

#jumbo {
  background: transparent;
  border: 1px solid grey;
}

#diva-sidebar ul {
  list-style-type: none;
  padding-left: 0.65em;
}

#footer a {
  color: white;
}

.errors {
  border: 1px solid #c70f36;
  color: #c70f36;
  background-color: #ffc0cb;
}

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-pro/css/all.css";

.header-icon-link-blue {
  color: theme-color("dark-blue") !important;

  :hover {
    color: theme-color-level("dark-blue", 2) !important;
  }
}

.header-icon-link-orange {
  color: theme-color("burnt-orange") !important;

  :hover {
    color: theme-color-level("burnt-orange", 2) !important;
  }
}

.color-burnt-orange {
  color: theme-color("burnt-orange");
}

EDIT: After adding

html {
    font-size: 16px;
}

To my custom.scss file, but the problem persists.

Upvotes: 1

Views: 1096

Answers (2)

Alex
Alex

Reputation: 21

I found a similar issue when designing sites using Bootstrap 4.x. The issue is Bootstrap uses the browser's default font size, and then sets relative font sizes from this. However, Firefox and Chrome seem to use a different default size, which causes issues most noticeably when you are using larger fonts on headings. The easiest solution is to set an exact base font size on the html to override the browser default, like so:

html {font-size:16px;}

Upvotes: 2

Tanbir Ahmod
Tanbir Ahmod

Reputation: 513

I think, you need to prefix your css code. Because, all browsers has a prefix code so: -webkit, -o, -moz ets. Go this Link and past your css left column and copy css from right column: for example: enter image description here Kindly mark it as Answer if it solved your problem :)

Upvotes: 0

Related Questions