Why is my CSS media query failing to increase font size?

I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devices (max-width: 576px).

CSS👇🏾


/*main title style*/

.title {
    font-size: 44px;
    font-weight: 700;
}

/*media query title styling*/
@media screen and(max-width: 576px) {
    .title {
        font-size: 70px!important;
    }
}

Html 👇🏾

<div class="container">
                <div class="row">
                    <div class="content col-lg-6 col-sm-12">

                            <h1 class="title mb-3">Host your website in less than 5 minutes.</h1>
</div>
</div>
</div>

I have tried using both "@media screen and(max-width: 576px)" and "@media (max-width: 576px)". Additionally, I experimented with the class "fs-sm-1" from Bootstrap library but found it too small.

The desired outcome is for the font size to increase from 44px to 70px on smaller devices.

Answer №1

Make sure to include a space between 70px and !important, as well as between and and (max-width: 576px).

/*main title style*/

.title {
    font-size: 44px;
    font-weight: 700;
}

/*media query title styling*/
@media screen and (max-width: 576px) {
    .title {
        font-size: 70px !important;
    }
}
<div class="container">
                <div class="row">
                    <div class="content col-lg-6 col-sm-12">

                            <h1 class="title mb-3">Host your website in less than 5 minutes.</h1>
</div>
</div>
</div>

Answer №2

Upon further examination, I realized that I had forgotten to include the necessary HTML tag for enabling "media queries."

It is crucial to include the following code snippet in your HTML file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
By adding this line, you will ensure that your media queries function correctly.

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

Enhancing the appearance of CSS Tables

I need help with applying a gradient line below each row of data that I am fetching from my database and displaying in a <table>. I've been able to achieve the design using an <hr> element, as shown here: http://jsfiddle.net/ghrw3k8e/. Ho ...

the script is run only one time

I have developed a unique web component and incorporated it in two distinct sections like this. <div class="sub_container"> <label>Users in Debt</label> <input placeholder="Search by user name" class="input_style ...

Acquiring the `=` symbol within email HTML

Here is the HTML that I send from my ASP.NET application: <HTML> <BODY> <img src='http://10.1.1.42:8090/EmailLogo/8aaebe52-3758-485f-8c52-7782707a4c66.jpg' /> <br/> <div style='font-family:Arial, Tah ...

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

Unable to render dynamic ID in Next.js version 13.4.6 due to an issue

https://i.sstatic.net/x8oF1.pnghttps://i.sstatic.net/OEIL5.png Currently diving into next-js! Previously, I utilized dynamic id rendering in my projects. However, encountering errors now with the current version (next js 13.4.6). Having trouble identifyin ...

Use the .html() function to alter the content of several sets of radio buttons simultaneously by changing

Here are the different options for a product. I need help with the .change() syntax to update pricing based on the following calculations: Bundle One + Marble Color = 15$ Bundle One + Black Color = 18$ Bundle Two [Most Popular] + Marble color = 25 ...

What is the significance of "HandleValidSubmit()" consistently being executed in Blazor?

After reviewing my code, I noticed that the button functionality is not behaving as expected. Specifically, regardless of whether I click the Delete or Submit button, it always triggers HandleValidSubmit() and executes UpdateQuizAsync. This causes an issue ...

I am looking to conceal an element as soon as a list item is scrolled into view and becomes active

Is it possible to hide a specific element when the contact section is activated on scroll, and have it visible otherwise? How can this be achieved using Jquery? <ul class="nav navbar-nav navbar-right navmenu"> <li data-menuanchor="ho ...

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

Angular and Bootstrap 5 combine to create a dynamic multi-item carousel featuring animated slide transitions and embedded YouTube videos

I'm trying to create a multi-item carousel using YouTube videos, and although I have managed to get it working with Bootstrap 5 carousel and cards, the animation when the carousel slides is not as smooth as I would like. The issue seems to be that the ...

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

Building a basic music player with the <audio> element and JavaScript / jQuery

I am new to Javascript and jQuery, and this is my first time posting a question here. I have been trying to create custom functions for the HTML5 audio tag by following tutorials online. Despite my efforts, I cannot seem to get it working. Although I can m ...

The align-self-center property in Twitter Bootstrap Flex does not properly center elements vertically

I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net ...

Is it possible to build an AngularJS application without utilizing HTML5?

Having created an AngularJS application, I have noticed that it functions smoothly on modern browsers. However, some of my devices run on old browsers that do not support html5. Unfortunately, I am unable to upgrade these browsers. Is there a method to ope ...

Ensuring proper input with JavaScript form validation

Currently, I am working on implementing a basic form validation feature, but it is not functioning as intended. The desired behavior is for the field border to change color to green or red based on its validity, while displaying text indicating whether t ...

Accordion in Bootstrap 5.3 behaving independently of data-bs-parent

I am currently working on designing an accordion feature where the headers are displayed in a column on the left side, and when expanded, the content appears in a column on the right side. Everything is working perfectly except for the fact that I have t ...

Arranging Bootstrap grid elements side by side

When setting up a webshop, I am organizing products into col-md-3 class divs. However, in mobile view, these divs are stacked on top of each other. I would like to have 2 divs displayed side by side when viewing on a mobile device. How can I achieve this? ...

Visibility of text compromised when placing transparent button inside input field

After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem. HTML Code <ng-template pTemplate=&quo ...

Displaying HTML content in UITableViewCell on iOS

Can anyone assist me with rendering HTML content containing images and text in different cells of a UITableView? My data source consists of HTML content that needs to be displayed on UITableViewCells. I have attempted using Attributed strings on UILabel a ...