HTML Font Size isn't working as intended?

Question

My current font size is 16px on the HTML tag. Whenever I try to decrease the screen's width using the inspect tool. It gets too small. I tried the below script. Even though Chrome's screen width is decreasing, it keeps loging 980 and 981 unless the width on chrome goes below 242.

function adjustFontSize() {
    console.log(window.innerWidth);
    var fontSize = window.innerWidth < 980 ? 26 : 16;
    document.documentElement.style.fontSize = fontSize + "px";
}
adjustFontSize();
window.addEventListener("resize", adjustFontSize);

I even tried the CSS by using @ media, but nothing seems to be working. I have no clue why. @media screen and (max-width: 768px)

The screen size is too small, in mobile screen.

Full code, if it helps

<div class="container-fluid p-4 vh-100">
        <div class="d-flex justify-content-around column-gap-3 h-100">
            {% comment %} Left Wrapper {% endcomment %}
            <div class="d-flex flex-column justify-content-between align-items-center flex-grow-1">
                {% comment %} Back Button {% endcomment %}
                <a href="" class="align-self-baseline btn btn-outline-primary rounded-4 d-flex align-items-center py-2 fs-6 fw-semibold"><span class="material-symbols-outlined fs-5 pe-2">arrow_back</span>Back to home page</a>
                {% comment %} Login Wrapper {% endcomment %}
                <form action="" class="m-0 d-flex flex-column align-items-center" method="post">
                    <span class="d-block d-lg-none fs-1 fw-medium">Welcome to Your <br> SETC <span class="text-gradient">Client Portal</span></span>
                    <div class="d-none d-lg-flex flex-column align-items-center wrapper-1">
                        <span class="fs-1 fw-medium">Welcome to IRSplus</span>
                        <span class="fs-1 fw-medium text-gradient">Client Portal</span>
                    </div>
                    <div class="d-flex flex-column align-items-center row-gap-3">
                        <div class="d-flex flex-column mt-5">
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="name@example.com">
                                <label for="floatingInput">Email*</label>
                            </div>
                            <div class="form-floating">
                            <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password">
                            <label for="floatingPassword">Enter Password</label>
                            </div>
                            <div class="d-flex mt-3 justify-content-between column-gap-5">
                            <div class="irs-checkbox">
                                <input class="inp-cbx" id="cbx-46" type="checkbox" />
                                <label class="cbx" for="cbx-46"><span>
                                    <svg width="12px" height="10px" viewbox="0 0 12 10">
                                    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                    </svg></span><span class="fw-medium">Remember me</span>
                                </label>
                            </div>
                            <a href="" class="text-decoration-none">Forgot Password?</a>
                            </div>
                        </div>
                        <div class="d-flex flex-column mt-5 align-items-center">
                            <button type="submit" class="btn btn-primary rounded-4 d-flex align-items-center justify-content-center py-3 w-50">Login <span class="material-symbols-outlined fs-5 ps-1">arrow_outward</span></button> 
                            <span class="fs-6 mt-3">Don't have an account yet?</span>
                            <a href="" class="text-decoration-none">Register new Account</a>
                        </div>
                    </div>
                </form>
                {% comment %} Footer {% endcomment %}
                <div class="d-none d-xxl-flex w-100 justify-content-between align-items-center">
                    <span class="fs-6 text-body-secondary fw-light text-break w-50" style="white-space:pre"> 
FYI - The Portal is designed for desktop &
table users only. Mobile app coming soon.
                    </span>
                    <span class="fs-6 text-end" style="white-space:pre">
Need help? Call support at <span class="fw-semibold">(</span> 
or email at <a href="" class="text-decoration-none"></a>
                    </span>
                </div>
                <div class="d-flex d-xxl-none flex-column justify-content-between align-items-center">
                    <span class="text-center border-bottom border-2 pb-2 mb-2">Need help? Call support at <span class="fw-semibold">(312)312-3119</span>  <br> or email at <a href="mailto:support@irsplus" class="text-decoration-none">support@irsplus.com</a></span>
                    <span class="fs-6 text-body-secondary fw-light w-75 text-center">FYI - The Portal is designed for desktop & table users only. Mobile app coming soon.</span>
                </div>
            </div>
            {% comment %} Right Wrapper {% endcomment %}
            <div class="d-none d-sm-none d-md-none d-lg-flex w-50 position-relative" >
                <div class="w-100 h-100 position-absolute rounded-5" style="background-image:linear-gradient(190.06deg, rgba(57, 108, 240, 0.2) 6.22%, rgba(57, 108, 240, 0) 52.87%), linear-gradient(16.9deg, rgba(57, 108, 240, 0.4) 16.97%, rgba(57, 108, 240, 0) 51.41%);"></div>
                <img src="{% static 'images/new-design/signup/login-image.png' %}"  class="rounded-5 img-fluid object-fit-cover" alt="" srcset="">
            </div>
        </div>
    </div>

Answer 1

Turns out I had forgotten this tag

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

Thanks to @A Haworth