Tips for adjusting the font sizes of Bootstrap 4 headings for different screen sizes using SASS

I am facing a challenge in achieving different font sizes for various screen sizes. Despite my efforts to code smartly, the outcome is not as expected. After conducting some research, it appears there may be an issue with how queries and variables interact with each other, although I am uncertain. Below is an example of what I attempted:

@media (max-width: 768px) {
    $h1-font-size:                $font-size-base * 1.944;
    $h2-font-size:                $font-size-base * 1.555;
    $h3-font-size:                $font-size-base * 1.333 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;

    .mixin-testix {
        font-size: 40px;
    }
} 


@media (min-width: 768px) and (max-width: 992px) {
    $h1-font-size:                $font-size-base * 2.222;
    $h2-font-size:                $font-size-base * 1.777;
    $h3-font-size:                $font-size-base * 1.388 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;    
} 


@media (max-width: 992px) and (max-width: 1200px) {
    $h1-font-size:                $font-size-base * 2.777;
    $h2-font-size:                $font-size-base * 2.222;
    $h3-font-size:                $font-size-base * 1.666 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;
}
htmlcsssassbootstrap-4

Answer №1

You are unable to alter the value of a variable within a @media query, however, you can utilize the value of a variable in a @media query. For instance,

@media (min-width: 768px) and (max-width: 991.98px) {
    h1, .h1 { font-size: $font-size-base * 2.222; }
    h2, .h2 { font-size: $font-size-base * 1.777; }
    h3, .h3 { font-size: $font-size-base * 1.388; }
    h4, .h4 { font-size: $font-size-base * 1.222; }
}

Demonstration: https://www.codeply.com/go/8wiWhxkaFZ

Additionally, take note: there is an error in your largest media query. It ought to be min-width instead of max-width.

@media (min-width: 992px) and (max-width: 1200px) {

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

Obtain content from a div element using jQuery

Here is a snippet of HTML code that I am working with: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="jquery.js"></script> <scri ...

javascriptjqueryhtml

Using Flexbox for dynamic-height items with column wrapping

Struggling to create a dynamic layout that adapts differently for mobile and desktop devices? The goal is to have items sorted based on screen size, with the layout changing accordingly. Check out the main objective below, with a mobile layout on the left ...

csstwitter-bootstrapbootstrap-4flexbox

The functionality of the button is currently not compatible with Internet Explorer

I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...

htmlinternet-explorerbuttonjsf-2primefaces

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

htmlcsscheckboxinputmargin

Simple Solutions for Moving Containers Up in Angular When Clicked

In the left side container, I have a header and sub-header, while the right side container contains text. However, whenever I click on the sub-header to display text on the right side, both container positions shift upward, hiding the header text. I'm ...

htmlcssangulartypescriptscroll

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

Incorporating dynamic content changes for enhanced user experience can be achieved more effectively with AngularJS

I am utilizing a REST service to retrieve information for a banner. The goal is to dynamically update the slider on the main page using this data. Currently, I am using $http.get to fetch the data, and then implementing interpolation with additional ng-if ...

javascripthtmlangularjsinterpolation

Is it possible for a Bootstrap table to extend beyond the boundaries of a Bootstrap

Within my bootstrap container, there resides a boostrap table structured as such: <div class="container"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> ...

htmlcsstwitter-bootstrap

What could be causing the video on the server not to play in HTML5?

Recently, I encountered an issue while converting a video to mp4 (H.264 and aac codec) using ffmpeg on Linux and attempting to play it from a server using HTML5. Surprisingly, the video did not work when played from the server, but it played smoothly when ...

phphtmlhtml5-videomp4

Turn off HTML5 Audio

There are 4 <audio> elements on a webpage. The client has asked for them to be available sequentially. Meaning, the first audio should play, then the rest should remain disabled until the first one finishes, and so on. In addition, they want the au ...

javascriptjquerycsshtmlaudio

Obtaining JSON data using Jquery results in the output of "undefined"

I am struggling to extract the correct values from a JSON document in order to display schedules in list view. Currently, when accessing the JSON document, I keep receiving "undefined" as the result. Below is an example of the JSON document: { "Ferries": ...

jqueryhtmljson

There is no method called 'footable' within Object [object Object]

My plan was to make my tables responsive using the FooTable jQuery plugin, but I am struggling with integrating it into my website. Here is the CSS code I have: <link href="FooTable-2/css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/> ...

jqueryhtmlcssjquery-pluginsfootable

Tips for displaying a div near the cursor's location when hovering in React JS

Looking for a way to show a hidden div at cursor position when hovering on Text item1 or item2. Check out the sample GIF animation in this Link My attempt using Jquery code inside React resulted in an error: $(".text-item").mouseenter(function ( ...

javascripthtmlreactjshoveronhover

"Incorporate keyframes to create a mouseleave event with a distinctive reverse fade

After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...

javascripthtmlcss

Tips for integrating jQuery styling into Angular 2

Using the farbtastic color picker, I am trying to pass the color code from jQuery to the HTML element with the property [style.backgroundColor]="color" when a button is clicked. HTML: <button ion-col full clear id="color-picker-handler" (click)="initi ...

jquerycssangularionic2

Distinguish a specific div within a group of divs by styling it uniquely using just CSS and HTML

I need assistance in selecting the first div with both "con" and "car" classes among all the divs using a CSS selector. <div class="box"> <div class="con">1</div> <div class="con be">2</div> <div class="con car">3& ...

htmlcss

Picking a live Selected choice within an HTML form

I currently have a dropdown menu that displays a list of employee names: <select class="form-control" id="assignee" name="assignee" style="max-width: 300px;"> <option value="Employee 1">Employee 1</option> <option value="Em ...

phphtmlsql

What is the process for changing the URL displayed in the address bar for each individual page?

Hey everyone, I need some help with a website issue I'm having. Let me explain what I'm trying to accomplish. My website www.website.com has several pages and is currently hosted on Apache via Aruba www.website.com/site/index.php ...

html.htaccessurl

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...

javascriptjqueryhtmlcss

Unable to fetch the webpage element object

While attempting to extract data from the historical table on investing.com, I encountered an issue where I couldn't retrieve the column item and an error occurred. Traceback (most recent call last): File "<ipython-input-119-ba739f477693>", ...

pythonhtml