Question 45235 in Html Question posted in
Some basic documentation can be found here.

Css media query not working (font size increase) – Html

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search