Adjusting Font Sizes with Bootstrap 4 Media Queries: A Simple Guide

I recently incorporated Bootstrap into my project, but I've encountered an issue with the fixed heading sizes. I'm attempting to modify the font size of my project, especially because the h1 and h2 text appears overly large on mobile devices. Strangely enough, when I try to adjust the font-size of the h1 and h2 tags, my changes seem to be disregarded, and upon inspection, there are lines striking through the code that alters the font-size. I even attempted using media queries but to no avail.

Code:

h1{
    font-size: 15px;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #E85A4F;
}

h2{
    font-size: 17.5px; 
}

p{
    font-size: 15px;    
}

@media only screen and (min-width: 576px){
    h1 {
        font-size: 20px;
        padding-top: 25px;
    }
}

Interestingly, adjusting the font-size of paragraph text works fine, but I'm struggling to find a similar solution for the heading font size. Is there a method to adjust the heading font size in a similar manner?

htmlcssbootstrap-4

Answer №1

When there are lines through the code, it indicates that the style is being overwritten.

https://i.sstatic.net/tGx0C.jpg

The image displayed above showcases the font size of the h1 in the code snippet below. Different styles are applied to the h1, with the one at the top of the style panel taking precedence. If there are multiple styles with the same specificity, the one in the last stylesheet is applied. The file and line where the style is specified are shown on the right side.

To address this issue, you can:

  1. Delete the conflicting code in the file and line that is overriding the headline style
  2. Use a selector with a higher specificity, such as h1.headline.
  3. Add !important to your style (font-size: 30px!important;), though this is considered a quick but less clean solution

h1{
  font-size: 30px;
}

@media only screen and (min-width: 800px){
  h1{
    font-size: 20px;
  }
}

/*
 a lot more css
 */
 
h1{
  font-size: 35px;
}
<div>
  <h1 class="headline">Test</h1>
</div>

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

Is it possible to combine EJS compilation and html-loader in the html-webpack-plugin?

I need the html-webpack-plugin to generate my html using my .ejs template that contains <img> tags. The html-loader can update the image URLs in my <img> tags created by Webpack, so I am including it in my configuration: test: /& ...

javascripthtmlwebpack

An error occurred while using Phonegap's FileTransfer() method - it seems that the File

After exploring various resources and finding no solutions, I have turned to this platform for help. I am attempting to initiate a .pdf download upon clicking on the following link: <a onclick="BeginDownload()" class="link" href="#">My guides</a ...

htmlcordovaphonegap-pluginsphonegap-build

Packaging an Angular project without the need for compiling

In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...

cssangularmodulesassangular6

Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

I have created a slider using Bootstrap and some JavaScript code that I modified from various sources. Everything is working well, but I want to remove the transition or animation that occurs when the caption changes. Currently, the captions seem to slide ...

javascripthtmlcssbootstrap-4carousel

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

https://i.sstatic.net/oqRwR.jpg In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6. HTML &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this? Is there another way to achieve this ...

htmlcss

Creating a mind map: A step-by-step guide

I'm currently developing an algorithm to create a mind map. The key focus is on organizing the nodes intelligently to prevent any overlap and ensure a visually pleasing layout. Take a look at this snapshot (from MindNode) as an example: Any suggestio ...

javascripthtmlcssalgorithmmindmapping

The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...

jqueryhtmlcssresponsive-designhamburger-menu

Bring your text to life with animated movement using HTML5 and/or CSS3

My goal is to have a snippet of text, like "Lorem Ipsum..." slide horizontally into a colored DIV quickly, then smoothly come to a slow stop, continue moving slowly, speed up again, and exit the DIV - all while staying within the boundaries of the DIV. I ...

htmlanimationcss

Hide the div element once the timer runs out

Struggling to make a timer disappear when it reaches 00:00, every attempt results in the div being hidden immediately. Check out the code snippet I've been working with: $(document).ready(function(e) { var $worked = $("#worked"); function upd ...

javascriptjqueryhtmlcountdown

JavaScript functions smoothly on Google Chrome but is restricted on Internet Explorer

Experimenting with the code found on this website to conduct some testing. The javascript functions smoothly in Google Chrome and Firefox, but encounters issues in IE. Interestingly, when I run the html file in IE locally, it does work, but a warning pops ...

javascripthtmlinternet-explorerwebsocket

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

Have you noticed that Angular doesn't blur out the clicked element for some strange reason? Well, I came up with a little 'fix' for it: *:focus { outline: none !important; } It's not a perfect solution because ideally every element sh ...

javascriptjqueryhtmlcssangularjs

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

javascripthtmlcss

Universal CSS styling for scrollbar design across platforms

I'm feeling extremely frustrated right now because I can't seem to create a basic scroll bar with a specific color and thickness that will display properly on various web browsers and smartphones. Are there any resources available to help me fig ...

htmlcssscrollbar

Is there a method to uncover the code that controls the display of a <div> element?

As a fresh face at the company, I've been given the responsibility of developing a chart that is similar to one already present on their website. While I have the knowledge and skills to create it, I am struggling to locate the specific code where the ...

htmltypescript

Error: Sorry, there was an issue with the code (React)

I'm attempting to build a React project without Node, and I'm trying to call a JS file from an HTML file. This is just a simple example for learning purposes. However, I keep encountering the Uncaught SyntaxError: Unexpected token '<&apos ...

javascripthtmlreactjsvisual-studio-codereact-dom

Tips for achieving a design aesthetic similar to that of the JQuery UI website

On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...

cssjquery-ui

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

phphtmlcssresponsive

Include a hyperlink to a website that was created with the help of Photoshop

Is it feasible to incorporate a hyperlink into a website that was designed using Photoshop templates? In the past, creating templates in Photoshop and then adding links with tools like Dreamweaver was common practice. I believed that dynamically adding li ...

phphtmlweb-deployment

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

csstypescriptmaterial-ui