Stack Overflow Anser: Responsive Login Link

This is an example for Stackoverflow question: http://stackoverflow.com/questions/19186243/javascript-to-get-screen-width-in-php-variable

by Barry Rowe

HTML

<h2> Drage size of the preview to see the display change</h2>
<li class="login-link"><a href="login.php">Log in</a></li>          
          <li id="login">
            <a id="login-trigger" href="#">Log in <span>&#x25BC;</span></a>
            <div id="login-content">
                <form>
                    <fieldset id="inputs">
                        <input id="username" type="email" name="Email" placeholder="Your email address" required>   
                        <input id="password" type="password" name="Password" placeholder="Password" required>
                    </fieldset>
                    <fieldset id="actions">
                        <input type="submit" id="submit" value="Log in">
                        <label><input type="checkbox" checked="checked"> Keep me signed in</label>
                    </fieldset>
                </form>
            </div>                     
        </li>

CSS

.login-link, #login{
    display: none;
}

@media screen and (max-width: 767px){
    .login-link {
         display: block;
    }
    .login{
         display: none;
    }
}
@media screen and (min-width: 768px) {
    #login{
         display: block;
    }
    .login-link{
         display: none;
    }
}