[Résolu] CSS responsive decalage par BalouLeKangourou - page 1

Salut, je dois faire une application web pour mon stage et j'ai une page connexion (fonctionnel) , mais je voudrais faire cette page en responsive. Malheureusement sur mon portable le formulaire est décaler sur la droite, du coup il y as un espace blanc à gauche de la page et j'arrive pas à trouver pourquoi, je quémande donc votre aide

ma page html :

<?php session_start(); ?>
<!DOCTYPE HTML>
<?php
if(isset($_POST["ide"]) and isset($_POST["mdp"])){
$ide=$_POST["ide"];
$mdp=$_POST["mdp"];
$_SESSION["err"]=0;
$DataBase = mysqli_connect ( "db740956876.db.1and1.com" , "dbo740956876" , "CA&LL!28_17!" , "db740956876" );

$Requete = "SELECT * FROM client WHERE idc='$ide' and pwd='$mdp'" ;

$Resultat = mysqli_query ( $DataBase, $Requete , MYSQLI_USE_RESULT )  or  die(mysql_error() ) ; 

while ( $ligne = mysqli_fetch_array($Resultat,MYSQLI_ASSOC))
    {
        $_SESSION["err"]=1;
        $_SESSION['monlogin'] = $ligne["idc"];
        $_SESSION['monpwd'] = $ligne["pwd"];
        $_SESSION['monprenom'] = $ligne["prenom"];
        $_SESSION['monnom'] = $ligne["nom"];
        if (isset($_SESSION["monlogin"]) and $_SESSION["monlogin"]=="21608023" and $_SESSION["monpwd"]=="]u4UPs") {
            echo '<script>window.location.href="page/admin.php";</script>';
            } elseif ($_SESSION["monlogin"]=="9514753" and $_SESSION["monpwd"]=="uU5>x5") {
                echo '<script>window.location.href="page/admin.php";</script>';
                } else {
                    header("location:index.php");
                     }
    }
mysqli_close ( $DataBase ) ; 
}
?>

<html>
     <head>
	     <title> QuickNow </title>
         <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
         <link rel="stylesheet"  type="text/css"  media="screen" href="style/index.css" />
         <link rel="stylesheet"  type="text/css"  media="screen" href="style/commun" />
    </head>
	 
	 <body>
	     <header>
         <img src="images/logo.png"/>
         </header>
         
        <article>
        <?php
           /* if (isset($_SESSION["monnom"])){ echo '<p id="identifiant">Bienvenue '.$_SESSION["monnom"].' '.$_SESSION["monprenom"].'</p>'; } */
            if (isset($_SESSION["err"])){
                $err=$_SESSION["err"];
                if ($err==0) {
                    echo "<div id='erreur'><p>Identifiant ou mot de passe incorrect</p></div>";
                }
             }
        ?>
            <form action="index.php" method="post">
                <p><label for="ide">Identifiant :</label>
                <input type="text" id="ide" name="ide"/></p>

                <p><label for="mdp">Mot de passe :</label>
                <input type="text" id="mdp" name="mdp"/></p>

                <p><button type="submit">Se connecter</button></p>
            </form>
            <!-- <a href="page/deco.php"><p>DECONEXION</p></a> -->  
        </article>
	 </body>
    

</html>

Mon css :

article {
    width:33%;
    background-color: white;
    /*border : 4px solid black; */ 
    margin-left: 33%;
    margin-top:8%; 
}

article form {
    width:100%;
    margin-left : 17%;
    margin-top : 12%;
    margin-bottom: 15%;
} 
article p {
    margin-left : 8%;
    margin-top : 8%;
}
label
{
	display: block;
	width: 24%;
	float: left;
    font-family: comflight;
}
button {
	border:none;
	padding:6px 0 6px 0;
	border-radius:2px;
	box-shadow:2px 2px 6px #999;
	background:#F56B2A;
	font:bold 13px Arial;
	color:white;
    width:55%;
}

#erreur {
    border:none;
	padding:6px 0 6px 0;
	border-radius:2px;
	box-shadow:2px 2px 6px #999;
	background: #c60b24;
	font:bold 13px Arial;
	color:white;
    width:45%;
    margin-top: 10%;
    margin-left: 28%;
}
@media screen and (max-width: 1024px) {
    article{
        width:100%;
        margin:0%;
        background-color: green;
    }
    form{
        margin:0%;
        background-color: orange;
    }
    label{
        margin: 0%;
        font-size:0.8em;
        background-color: red;
    }
    input{
        margin: 0%;
        width:40%;
    }
    p{
        margin:0%;
        background-color: aqua;
    }
    html{
        margin: 0%;
    }
    body{
        margin:0%;
    }
}

J'ai essayer de mettre des margin 0% un peu partout pour tout remettre sur la gauche mais ca fonctionne pas :/

CSS responsive decalage

CSS responsive decalage

Supprimer

Modérer

Signaler le message aux modérateurs