I'm working on a mini web project with Symfony framework and i have encountred a small problem with the CSS, when i try to make the web page responsive using the @media it doesn't work, here's the html.twig file and the css script:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>LIP</title>
</head>
<body>
{% block stylesheets %}
<link href="https://cdnjs.cloudflare.com/ajaxcss/font-awesome.min.css" rel="stylesheet">
<link href="{{asset('css/signInUp.css')}}" rel="stylesheet">
<link href="{{asset('css/Homestyle.css')}}" rel="stylesheet">{% endblock %}
<link href="{{asset(" rel="icon" type="image/x-icon">
<div class="section1">
<div class="description">
<img class="eiffel-icon" src="{{asset("><br>
<h1 data-text="Lost In Paris"><span>Lost In Paris</span></h1>
<p>xd</p>
</div>
<div class="top-players">
<p class="tp_t">Top Players list</p>
<ol>
<li style="list-style: none">{% if top_players is defined %} {% for player in top_players %}</li>
<li>{{ player.username|e }}{% endfor %} {% endif %}</li>
</ol>
</div>
</div>
<div class="section2">
<div class="form-group" id="#box">
<div id="btn-box">
<div id="btn"></div><button class="toggle-btn" onclick="sign_in()" type="button">Sign in</button> <button class="toggle-btn" onclick="sign_up()" type="button">Sign up</button>
</div>
<form action="{{path('login_Player')}}" class="input-group" id="sign-in" method="post" name="fff1">
<input class="input-field" name="_username" placeholder="Saisir votre username" required="" type="text"> <input name="_csrf_token" type="hidden" value="{{ csrf_token('authenticate') }}"> <input name="_target_path" required="" type="hidden" value="{{path('redirect_player')}}"><br>
<input class="input-field" name="_password" placeholder="Saisir votre mot de passe" required="" type="password"><br>
<span class="error" style="color: red"></span> <input class="submit-btn" name="B1" type="submit" value="Se connecter"> {% if error is defined %}
<div class="alert alert-danger">
{{ error.messageKey|trans(error.messageData, 'security') }}
</div>{% endif %}
</form>
<form action="{{path('create_Player')}}" class="input-group" id="sign-up" method="post" name="fff2" onsubmit="return signupValid()">
<input class="input-field" name="pseudo" placeholder="Saisir votre username" required="" type="text" value=""><br>
<input class="input-field" name="mail" placeholder="Saisir votre mail" type="text"><br>
<input class="input-field" name="pass" placeholder="Saisir votre mot de passe" required="" type="password" value=""><br>
<input class="input-field" name="confirm_pass" placeholder="Confirmer votre mdp" required="" type="password" value=""><br>
<p class="error" id="signup_error" style="color: red; margin: 0; padding: 0;">{% if msg is defined%} {{ msg }} {% endif %}</p><input class="submit-btn" name="B1" type="submit" value="S'inscrire">
</form>
</div>
</div>
<div class="footer">
<p>2020 Copyright</p><a class="fa fa-facebook" href="https://"></a> <a class="fa fa-linkedin" href="https://"></a> <img class="logo" src="{{asset('Icons/logo_ensg.png')}}"></div>{% block javascripts %}
<script src="{{asset('js/FormValidation.js')}}">
</script>
<script src="{{asset('js/toggle.js')}}">
</script> {% if msg is defined %}
<script>
sign_up()
</script> {% endif %} {% endblock %}
</body>
</html>
and this is my CSS:
body {
color: #fff;
background-color: #11181e;
margin: 0;
}
.section1 {
background-color: #11181e;
width: 50%;
float: left;
height: 100vh;
/*border-right: 1vw solid #F5E5D6; */
/*box-sizing: border-box;*/
margin: 0;
padding: 0;
}
.section2 {
background-color: #11181e;
width: 50%;
float: left;
overflow: hidden;
height: 100vh;
margin: 0;
padding: 0;
}
.footer {
height: 20%;
width: 100%;
margin-bottom: 0px;
padding: 0px;
}
@media screen and (max-device-width: 800) {
.section1 {
width: 100%;
float: top;
}
.section2 {
width: 100%;
float: bottom;
}
#btn-box {
width: 10%;
height: 5%;
}
#btn {
width: 5%;
height: 5%;
}
}
I deleted some style from this script because i find it not related to the problem, and when i render in my browser it gives this:
Thank you in advance and have a good day everyone
