I recently started working on a website using Ubuntu. However, I noticed that when I view it in Firefox, the layout appears smaller compared to Chrome. Here are screenshots for reference:
https://i.sstatic.net/YnMFL.jpg
https://i.sstatic.net/Jespf.jpg
Both browsers have the default font set to DejaVu Serif at 16px and I haven't made any changes to Bootstrap's default font size (1rem).
Could anyone explain why there is this difference between browsers and suggest ways to standardize the display across different platforms?
EDIT: Sharing my scss file as 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;
}
}
/* More styles follow below... */
EDIT: Even after including the following code in my custom.scss file:
html {
font-size: 16px;
}
The issue persists without any improvement.