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.