Unable to increase font size using CSS

I am struggling with adjusting the size of an h1 element along with other properties, but the only change I see is in the font family. Could it be the Bootstrap grid I am using causing this issue? I am still relatively new to Bootstrap.

h1{
  font-family: 'Montserrat';
  line-height: 1.5;
  font-size:3.5rem;
}
<head>
   <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a554a57">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
 <div class="row">
      <div class="col-lg-6">
        <h1>Hello World.</h1>
      </div>
      <div class="col-lg-6">
      </div>
 </div>

I have tried testing my code on various browsers and devices, cleared the cache, but the results remain the same.

htmlcssbootstrap-4font-size

Answer №1

How to troubleshoot issues related to "My styles aren't being applied"

Start by utilizing the developer tools in your browser to delve into the element in your document object model (DOM).

https://i.sstatic.net/SchwP.png

Upon inspection, you'll notice that the font-size value is being overridden by Bootstrap's styles (stemming from the mentioned _rfs.scss file).

Option A: Implement Display Headings (Bootstrap, tailored for your situation)

Consider using Bootstrap's Display Headings to establish various font sizes for your headings.

For your circumstance, you can experiment with this snippet:

<h1 class="display-1">Hello World.</h1>

Option B: Class Specificity Method

Introduce a custom class and reference it in your CSS.

h1.my-heading {
  font-family: 'Montserrat';
  font-size: 15rem;
}
<head>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262d3a3d3b2839097c6778677a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
  <div class="col-lg-6">
    <h1 class="my-heading">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

Option C: Utilize !important sparingly (not recommended)

Resort to using the !important keyword to prioritize your styles for h1 elements. However, this approach can lead to conflicts when multiple !important declarations are present and is generally considered unfavorable.

font-size: 15rem !important;

Answer №2

If you want to target specific elements in CSS, you should be more precise with your query selector.

.bigger {
  font-family: 'Montserrat';
  line-height: 1.5;
  font-size: 3.5rem;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a859a87">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="row">
  <div class="col-lg-6">
    <h1 class="bigger">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

Here are some examples showing how to increase specificity:

table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

You can also add the same selector after the existing one:

td { height: 50px !important; }

Alternatively, try to rewrite the original rule to avoid using !important altogether.

[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}

RES: Check out MDN Specificity for more information.

Answer №3

Exploring the possibilities with bootstrap is a step in the right direction. To troubleshoot any issues, simply inspect the element in your web browser.
It appears that rfs.scss is affecting the font-size on your page.
If you wish to modify it globally, a quick search for "how to change bootstrap font size" should provide some guidance. Alternatively, you can create a custom CSS class and apply it to your h1 element.

Answer №4

The issue lies with Bootstrap causing conflicts. By specifically targeting the h1 element, you can override Bootstrap's default styling.

To ensure your styles take precedence, it's best to avoid using !important as a quick fix. Instead, prioritize specificity in your CSS.

It's worth noting that your font is currently unaffected because Bootstrap does not define styles for it.

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

Hovers and click effects for navigating through images

The website I'm currently working on is stipz.50webs.com. p.s. HOME functionality is not active at the moment. Having successfully implemented the onhover and onmouseout features, my next goal is to enhance the navigation effects for each div/img so ...

javascriptjqueryhtmlcssimage

Learn how to display a "not found" message in a React.js application

I have a piece of code where I am sending a post request to an API and retrieving all the data from the API in a table. I am trying to find currency data based on the currency name, if found I display the data in a div, if not found I want to print "not ...

javascripthtmlreactjs

What is the process for enabling SASS line numbers using Yeoman's Grunt.js file?

Recently, I used Yeoman (1.4.5) to scaffold a new web application. Within my Gruntfile.js, I configured it as follows: ... // When requested, compile Sass to CSS and generate necessary files sass: { options: { lineNumbers:true, sourceMap: true, ...

csssassgruntjsyeoman-generatorline-numbers

Tips for emphasizing a chosen hyperlink within a jQuery Mobile panel

I am currently working on a jquery mobile page that includes a navigation menu in a sliding panel. While the functionality is good, I am looking to enhance the user experience by highlighting the selected link in the navigation. Typically, I would utilize ...

jquerycssjquery-mobileselecteditem

Align and resize image using CSS styling

Seeking assistance on centering and cropping images using CSS. Tried implementing the technique from this specific article. However, experiencing inconsistencies in device UI output. Can someone shed light on this behavior? Scenario: The objective is t ...

htmlcssangularsassionic3

Adjust the Material UI Select component to accommodate the length of the label

Is there a way to automatically adjust the size of Material-UI's Select input based on the label? In the official demo, minWidth is added to the formControl element. However, I have multiple inputs and do not want to set fixed sizes for each one. Whe ...

cssreactjsmaterial-ui

"Creating a 2-column layout for an unordered list using CSS Flex

After spending far too much time at work today pondering this issue, I've decided to turn to the collective wisdom of the internet. My dilemma involves a standard <ul> containing multiple <li> elements (currently 12, but this number could ...

htmlcssflexboxcss-grid

Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible? #navigationWrap { position: fixed; top: 0; ...

htmlcss

Modifying the value property of the parent element

Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...

javascriptjqueryhtml

Learn how to create a logarithmic scale graph using CanvasJS by fetching data from an AJAX call

window.onload = function() { var dataPoints = []; // fetching the json data from api via AJAX call. var X = []; var Y = []; var data = []; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("applicatio ...

javascriptjqueryhtmlcsshtml5-canvas

What are some ways to change the appearance of a component using its parent?

In order to make changes to the CSS properties of a Vue component from its parent, effectively overriding any existing styles within the component, I am seeking a solution. Initially, I assumed that styling a component like <my-component> directly f ...

cssvue.jsvue-component

Using Android to Load HTML Content from a Database and Display in a WebView

I am currently facing an issue with loading HTML content from my sqlite database into a webview successfully. The HTML renders beautifully, however, the local file included in the HTML is not being loaded. I have placed it in the assets folder under this s ...

androidhtmlwebviewlocal-storage

Tips for creating a concise summary of written content

I am interested in creating an AI-powered summary generator for text input within a textarea element. Below is the HTML code snippet I have been working with: <textarea id="summary">Enter your text here</textarea> If you hav ...

javascripthtmltextartificial-intelligence

Tips for positioning footer text to the left and right, similar to Google's style

Explore www.google.com for inspiration. You will notice a footer containing links to Advertising, Business, and About on the left side, and Privacy, Settings, Terms, etc. on the right side at the bottom of the page. I am an aspiring developer attempting ...

htmlcss

Fetch several images simultaneously from a photo collection using JavaScript by generating a batch process

I need help with creating an image gallery that allows users to download multiple images by selecting them. The download should result in a zip file. I have checkboxes for selecting the images, but I'm struggling to figure out how to enable the downlo ...

javascriptjqueryhtmlbootstrap-4

What could be causing my div link to redirect to different content instead of the intended destination?

When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...

javascriptjqueryhtmlcss

How to Create a Bootstrap 4 Fixed Bottom Navigation with a Dropup Feature?

After thoroughly researching the site, I have not found a solution that works with this particular approach. In order to create the following template, I utilized Pingendo. .dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: .125rem; ...

htmlcsstwitter-bootstrapbootstrap-4

Creating a multi-level mobile navigation menu in WordPress can greatly enhance user experience and make

Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered ...

javascriptjquerycsswordpress

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Imagine you have a DIV element in your document with the id "row". Now, if you add another DIV with the same id and change the display property of the first DIV to "none", does the id of the second DIV become unique? ...

javascripthtmlcssdom

An issue occurred while trying to retrieve the js file, as an error with code net::ERR_ABORTED 404 (Not

Although this question has been asked before, I am unsure where to find the solution. My express backend server needs to render an HTML page with main.js in it upon launch. app.js code: var createError = require('http-errors'); var express = req ...

javascripthtmlnode.jsexpresshttp-status-code-404