如何更改标题的宽度并使其响应

Question

I didn't change any code, but the navbar is shortened automatically If I set width="300px" the header becomes unresponsive

Header Code:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('home.home_') }}">
            <img alt="Quizz" height="70" src="../static/logo.png" width="70">
        </a>
        <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
                class="navbar-toggler" data-bs-target="#navbarSupportedContent"
                data-bs-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <li>
                     <a href="{{ url_for('login_system.logout') }}"><button class="btn btn-success">Log Out</button></a>
                </li>
                {% else: %}
                <li>
                    <a href="{{ url_for('login_system.register') }}"><button class="btn btn-primary">Sign Up!</button></a>
                    <a href="{{ url_for('login_system.login') }}"><button class="btn btn-success">Log In</button></a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

Note: This a flask template!

What can I do to make it width to full screen?

Answer 1

Have you set the meta tag yet? Like <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

There are many ways one can use media queries but this is how i use mine

// This Styling Applies When The Width Is 500px like on a mobile

@media(max-width:500px){ 
// The Width Of The Header Will Be whatEverYouWant When The Screen Width Is 500px
header{
 width:whatEverWidthYouWant
}

}