Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

    • Partager sur Facebook
    • Partager sur Twitter
      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

      • Partager sur Facebook
      • Partager sur Twitter

      utilisation responsive

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      • Editeur
      • Markdown