CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AgainMe
AgainMe

Reputation: 780

Cannot make html responsive

I'm using bootstrap as UI framework, actually all working pretty well but I need to make my website responsive for mobile devices.

I've this simple structure for the moment:

<!doctype html>
<html>
<head>
    <title>Website</title>
    <!-- CSS AND LIBRARY INCLUSION -->
</head>

<div id="wrapper">

<nav id="header" class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <div id="header-logo" class="navbar-brand">
                <span>Website</span>
            </div>

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-menu"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>


        <div id="header-menu" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="#" class="menu-item">Home</a>
                    </li>
                    <li class="">
                        <a href="#" class="menu-item">Login</a>
                    </li>
                    <li class="">
                        <a href="#" class="menu-item">Help</a>
                    </li>
            </ul>
        </div>
    </div>
</nav>

<div id="login-panel" class="frame-container">
    <h2>Login</h2>
    <div class="alert hidden"></div>
    <form id="login-form">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Email" class="form-control" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Password" class="form-control" />
        </div>
        <br>
        <button type="submit" id="login" class="btn btn-primary">Accedi</button>
    </form>
</div>

</div> <!-- Wrapper -->

<div id="footer" class="footer">
    <div id="footer-container" class="col-xs-12 col-md-6">
        Footer (C)
    </div>
</div>

</body>
</html>

I tried to make at least the header and footer responsive like this:

@media(max-width: 860px) {
    #header #header-menu .menu-item {
        min-width: 85px;
    }

    #footer #footer-user-display-name {
        text-align: left;
    }
}

This doesn't working, the resolution is even the same, what I can do?

Upvotes: 1

Views: 131

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You forgot to add the Viewport Meta tag, which is essential for this:

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

Upvotes: 4

Related Questions