Divergent font sizes displayed in Ubuntu Chrome and Firefox with Bootstrap 4

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.

Answer №1

While working on website designs with Bootstrap 4.x, I encountered a common issue related to font sizes. The problem arises from Bootstrap's reliance on the browser's default font size, leading to inconsistencies between browsers such as Firefox and Chrome. This becomes most apparent when using larger fonts for headings. To address this issue effectively, one simple solution is to set a specific base font size directly on the html element:

html {font-size:16px;}

Answer №2

It's important to remember to include prefixes in your CSS code for compatibility with different browsers. Each browser has its own prefix code such as -webkit, -o, -moz, etc. You can use the Autoprefixer tool to automatically add these prefixes. Simply paste your CSS in the left column and copy the updated code from the right column. Here is an example: https://i.sstatic.net/kx5Ne.png If this solution resolves your issue, please mark it as the accepted answer :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the CakePHP form helper to include an HTML element within a form element

I am attempting to generate a basic html output that resembles the following <button class="searchbutton" id="search_button" type="submit">--> <i class="icon-search"></i> Search</button> when using Cake PHP's form h ...

Leveraging jQuery for Custom Form Styling

.I prefer to utilize personalized form elements in my forms. <fieldset> <legend id="Cities">Urban Areas</legend> <div class="legend-underline"></div> <div class="filters" id="Cities-filters"> <div> < ...

Ensure that the image within the child div occupies the entire height of the parent div

I'm having a bit of trouble figuring this out and could use some input: There's a parent div with an unspecified height, determined by its content. Inside this parent div are two 'child' elements; however, I want only one to dictate t ...

How to retrieve a DOM element using Aurelia framework

When it comes to accessing a DOM element in Aurelia, what are the best practices to follow for different use cases? Currently, I have two scenarios in my Aurelia project: Firstly, within the template, there is a form that I need to access from the view-mo ...

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...

dismiss data and button for closing notification bar

I am currently using a notification bar at the top of my website, instead of a modal. I am wondering if it is possible to click the X (close-button) and have the notification bar disappear. I attempted to use data-dismiss but it did not work. Also, how can ...

The scope chain in Chrome v71 connects the anchor tag to the inner img tag

Ever since updating to Chrome v71, I've noticed a strange issue with the scope of an anchor tag that contains an img tag inside. Take a look at this snippet: <a href="#none" onclick="debugger;complete();"> <img src="https://clickmeuk.net/w ...

When a table's row is clicked, it will expand to reveal a secondary table

I am facing an issue with rendering a table using v-for in Vue. I want to display a subtable or more information section below a specific row when it is clicked on. My attempts to add a new tr within the existing tr have resulted in errors or the new row ...

Issues with CSS not reflecting on GitHub pages

Struggling to apply my CSS to my gh-pages, I feel like I'm stuck in a loop. Here's how it was originally set up: <link rel="stylesheet" type="text/css" href="css/style.production.css"> (the CSS is in a folder ...

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

Repeatedly utilizing a drop-down menu

Can a <select> menu be written and utilized in multiple locations on a webpage? For instance: <select id="dm"> <option value="">Select Quantity</option> <option value="less ">50 - 60</option> <option value="me ...

Button displayed on complete Bootstrap 4.5 Card

When running the code below, the text "Click Me" appears when the mouse hovers over it. I actually want "Click Me" to be displayed for the entire card (list). <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel= ...

CSS Rules with Lower Specificity Will Take Precedence Over Rules with Higher Specific

Currently, I am enrolled in an online web development course and have been working on creating webpages to grasp the concepts of HTML and CSS. However, I encountered an issue where the font-family rules in my p and h3 elements were overriding the font-fami ...

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

As someone working in the analytics field, I often rely on CSS selectors to address various issues. Currently, I am faced with a task on a website where I need to determine whether a <p> element is hidden or visible. There are two possible scenarios: ...

Expand <a> to occupy the <li> element within the menu

Encountering a bit of a challenge... Is there a way to expand my <a> elements to completely fill the <li> containers they are placed in? I'm aiming to enhance the accessibility of the links for easier clicking. Check out my jsFiddle: htt ...

The div father's width is not fully occupied by col-xl-12

Can you explain why inew2 and inew3 do not have a width of 100% of their parent div? https://i.sstatic.net/a4GEa.jpg html, body{ width: 100%; height: 100%; margin: 0px; padding: 0px; } .ibrands{ height: 120px; background-color: blue; } @media only scre ...

Exploring the features of AngularJS with a secure login page

I need some guidance on the best way to create a login page. Currently, I have set up a ng-view root ("/login") in my app.js file. The issue I am facing with this approach is that I have to include static HTML in other files using ng-include. (This stati ...

Retrieving a PHP variable from HTML without using a form

Is there a way to pass a variable from HTML to PHP without using a form and the traditional post or get methods? I have tried using the code provided, but I am unable to access the value of the 'buy1' variable in PHP. Is there a way to achieve th ...

Utilize jQuery to extract various input/select box values and compile them into an array for submission using .ajax()

I am currently facing an issue with dynamically generated forms using PHP and updated with jQuery's .appendTo() function as visitors interact with it. My main goal is to collect all input text and select box values from the current form and submit the ...

Failure to send chat form

I have been developing a PHP chat application and everything is working well. However, I am looking to implement AJAX in order to prevent the page from refreshing. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></s ...