CODEWITHSUNDEEP
htmlcssbootstrap-4frontendbootstrap-5
KarimAziz
KarimAziz

Reputation: 3

Css media query not working (font size increase)

I have a problem using "media query". It never works for me and I searched many times and can't find the solution. here is the code below and I am trying to increase the font size from 44px -->> 70px in small devices (576px max-width)

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 tried using both "@media screen and(max-width: 576px)" and "@media (max-width: 576px)"

I also used the class "fs-sm-1" brought from bootstrap library but it was too small for me.

I expect the font size to increase from 44px >> 70px in small devices

Upvotes: 0

Views: 41

Answers (2)

KarimAziz
KarimAziz

Reputation: 3

I also noticed that I did not add the proper tag so that "media queries" work.

make sure you add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> so your media queries work

Upvotes: 0

mahdi gholami
mahdi gholami

Reputation: 492

you just need to put a space between 70px and !important. and also 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>

Upvotes: 0

Related Questions