utilisation responsive

20 octobre 2021 à 18:20:52

bonjour j'ai un problème avec le responsive css et je ne comprends pas l'origine ni comment le résoudre

j'ai une propriété

@media screen and (max-width: 700px){
    body{
        background-color: rgb(197, 22, 22);
        width: 100%;
        height: 100%;
        margin: 0px;
    }
}

qui est sensé s'appliquer si width < 700px mais elle ne s'applique pas, je n'ait pas d'autres propriétés comme celle ci

et voici le html sur lequel c'est sensé s'appliquer

<!DOCTYPE html>
<html lang=FR>
    <head>
        <!--head et meta-->
        <meta http-equiv="Content-Type" content="text/html/img; charset=utf-8" allowfullscreen>
        <link rel="icon" type="image/png" href="">
        <title>times up</title>
        <link rel="stylesheet" href="style/style.css">
    </head>
    <body>
        <?
        include "header.php";
        ?>
        <div id='maincontent'>
            <form action="index.php">

            </form>
        </div>
    </body>
<?php
    include "footer.php";
?>
</html>

il y a un peu de PHP dsl...

en allant vérifier sur l'outil dev celà fonctionne en rétrécissant la fenêtre windows mais pas dans responsive de chrome

merci

-
Edité par Nicolas Hesse 20 octobre 2021 à 18:39:42

AbcAbc6

20 octobre 2021 à 22:08:42

Bonsoir, si vous faite du responsive ajouter la balise meta viewport

Quelques erreurs dans votre code:

Le footer.php doit être avant le </body>. Rien ne doit être entre </body> et </html>.

En HTML5 il existe la meta charset

<meta charset="utf-8">

L11 l'ouverture de la balise php n'est pas <? mais bien <?php