Première page pour mobile

michelbourg Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
 Utilisateur anonyme -
Bonjour,

J'ai besoin de comprendre pourquoi ça coince
page css 
@charset "utf-8";
/* Decoration */
body {
  margin: 0;
  background: #006600;
  font-family: arial, sans-serif;
}
#global {
  max-width:1200px; /* largeur maxi de l'affichage */
  margin:0 auto;
  }

#global > header,
#global > main > nav,
#global > main > section > article,
#global > main > section > aside,
#global > footer {
  margin: 0;
  padding: 1em;
  border-radius:5px;
  box-shadow: 0px 2px 5px #999;

}
#global > main > section > article {
  background:#fff;
}
/*----------------------------------------------------------------------*/

@media screen (max-width: 375px) {

  #global  {
  -webkit-flex-direction: row;
   flex-direction: row;
   width: 100%;
  }
  #global >  article {
    width: 98%;
  }
  #global > nav > aside {
 width: 2%;
  } 
  #global > h1 {
 font-size:1em; 
 text-align:center;
 color:#FF9900
  }

  #h2 {
   font-size:11px; 
   text-align:center;
   color:#FFCC00;
   }
  #recherche {
 display:none;
  }

}


Page de test 

<!DOCTYPE html>
<html>
    <head>
  <title>Site consacré à la présentation de tous les timbres français depuis 1849</title>
  <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
  <meta name="Langue" content="Français" />
  <meta name="description" content="Les timbres postaux ou fiscaux sont collectionnés par des philatélistes qui les classent, les étudient et les rangent dans des classeurs ">
  <META NAME="keywords" CONTENT=" <?php if(file_exists('script/keywords.php')) require_once('script/keywords.php');  ?> ">
     <link rel="stylesheet" href="feuille_css/css_mobile.css" media="all" type="text/css"/>
</head>
<body>

<div id="global">
<!--------------------------------------------------------------->  
  <header>
  <h1 id="h1">PHILATELIE FRANCAISE</h1>
 <?php if(file_exists('script/texte_bandeau_haut.php')) include('script/texte_bandeau_haut.php');?>
  </header> 
    <!-- fin de header -->
   <main>
  <nav>nav</nav>
  <section>
    <article>
   <header>
     <h1>Titre de l'Article</h1>
   </header>
   <div>contenu de l'article.</div>
    </article>
    <aside>Annexe</aside>
  </section>
   </main>
   <footer>Footer</footer>
</div>
</body>
<?php //mysqli_close($base_gene); ?>
</html>


Mon titre "philatélie française" s'affiche en noir et en taille 2em ? quand je teste avec Chrome en Iphone 6/7/8 et la recherche s'affiche alors que je veux le rendre invisible

j'ai loupé quelque chose mais quoi ?

Merci pour votre aide

Configuration: Windows / Firefox 65.0
A voir également:

4 réponses

Réponse 1 / 4
Utilisateur anonyme
 
Bonjour

Mon titre "philatélie française" s'affiche en noir et en taille 2em
Tu comptais sur 
#global > h1
pour styler ton h1 ? mais ton h1 n'est pas le fils direct de #global : il y a <header> entre les deux. Pourquoi ne pas utiliser #h1 comme sélecteur, puisque tu as défini cet id ?
Quant à la recherche dont tu parles, peux-tu préciser de quel élément il s'agit ?
0
Réponse 2 / 4
michelbourg Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour
j'ai modifié "#global > h1 " en #h1 mais ça ne change rien

Pour la recherche il s'agit de ça 
<?php if(file_exists('script/texte_bandeau_haut.php')) include('script/texte_bandeau_haut.php');?>

------------------------------------------------------------------------------------

<!-- Formulaire de recherche -->
<div id="recherche">
<form id="cherche" action="<?php echo $_SESSION['adresse_site'].'recherche/recherche_like/like.php'?>" method="post" >
        <p ><FONT color="white">
            <label for="form_numero">Un numéro  </label>
            <input type="text" id="form_numero" name="cherche_num" style="width:50px; font-size:12px" />
            <label for="form_mot">Un mot </label>
            <input type="text" id="form_mot" name="cherche_mot" style="width:50px; font-size:12px" />
            <label for="form_mot">Partie de mot </label>
            <input type="text" id="form_mot" name="cherche_partie" style="width:50px; font-size:12px" />

        <input name="Chercher" type="submit" style="width:50px; font-size:12px" value="Chercher"/>
    </FONT></p>
</form>
</div>


Autre question
Donnez moi votre avis pour savoir si il est judicieux de transformer le site pour le visualiser sur un mobile ? moi je me pose la question car beaucoup d'éléments seront invisibles
site : https://www.philatelie-francaise.com/index.php
0
Réponse 3 / 4
michelbourg Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
image chrome

0
Réponse 4 / 4
Utilisateur anonyme
 
Je ne connaissais pas les media queries, mais si j'en crois la doc et l'essai que j'ai fait, tu as oublié un AND : 
@media screen and (max-width: 375px)
0

Discussions similaires

Retrouver mes factures réglo mobile
Conde -
Mlv2a -

7 réponses
demande de facturation de ma ligne reglo mobile depuis le 1er à
odile -
Utilisateur anonyme -

1 réponse