1398 sujets

Web Mobile et responsive web design

Bonjour,
J'ai créé une page individuelle avec des divs (Page hébergée sur le site 1and1). J'ai créé dans mon CSS mes média quiery pour mon responsiv. Mais lorsque j'ouvre ma page en format smartphone,par exemple, mon code n'est pas pris en compte. (J'ai essayé de mettre le code responsiv en première ligne et en dernière ligne mais cela ne change rien). Je ne sais pas si il y a quelque chose de spéciale à ajouter sur ma feuille css. Pourriez-vous m'aider svp?

/****************** Responsiv ***************************/
@media screen and (min-width: 1102px) and (max-width: 979px){
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13 {
    padding: 0 22px;
}
#Row2 p, #Row3 p, #Row4 p, #Row5 p, #Row6 p {
    font-size: 18px;
}
input {
  width: 153px;
}
.col13 {
	padding-top: 80px !important;
}
}

@media screen and (min-width: 978px) and (max-width: 845px) {
.col5 .name{
  width : 300px !important;
}
.col13 a {
    font-size: 19px;
}
#Img1 img {
    height: 26%;
    position: absolute;
    top: 72px;
    right: 0px;
}
}

@media screen and (min-width: 844px) and (max-width: 669px) {
#Row3, #Row3, #Row4, #Row5, #Row6 {
	flex-direction: column;  
}
.col13 {
	padding-top: 50px !important;
}
}

@media screen and (min-width: 668px) and (max-width: 413px) {
#Img1 img {
  display:none !important;
}
#Row1 p {
  font-size : 30px;
}
textarea {
    width: 310px;
    max-width: 400px;
}
.col13 a {
    font-size: 19px;
}
}
@media screen and (min-width: 412px) and (max-width: 300px){
#Row2 p, #Row3 p, #Row4 p, #Row5 p, #Row6 p {
    font-size: 15px;
  	line-height: 26px;
}
  #Img1 img {
  display:none !important;
}
input {
  width: 129px;
}
#Row1 p {
  font-size : 22px;
}
.bouton1, .bouton2 {
    margin: 8px 20px 0 0;
}
}

/*******************Fin responsiv********************/
Modérateur
Bonjour,

@media screen and (min-width: 1102px) and (max-width: 979px) signifie plus large que 1102px et moins large que 979px.

Du coup, ça ne risque pas de marcher (un écran ne peut pas être à la fois plus large que 1102px et moins large que 979px) !

Amicalement,
Merci pour ta réponse, en effet je n'avais pas compris comme cela.
J'ai utilisé ca : @media screen and (max-width: 1102px)

J'ai donc changé mais cela ne fonctionne toujours pas.
http://ozevent.fr/
Aurais-tu ou vous une autre idée ?
Modérateur
Bonjour,

Cahal a écrit :
Aurais-tu ou vous une autre idée ?


Alors réponse courte : il faudrait tout refaire.

On va donc y aller pas à pas !

1) C'est quoi qui selon toi "ne marche pas" ? (car il me semble que tes media queries ont bien un effet, là, même si ce n'est pas celui attendu !)

2) Tu souhaites absolument conserver le code html, ou bien on peut le modifier ?

3) Est-ce que l'exemple que tu donnes est une page complète, ou bien un extrait d'une page contenant d'autres informations ?

Amicalement,
Modérateur
Bonjour,

J'ai finalement procédé à pas mal de modification de ton html et de ton css. Le point clé est de donner la même largeur à tous les inputs text courts, et environ 2 fois cette largeur pour l'input adresse et le textarea des messages, et de ne pas modifier ces largeurs même quand on a des écrans plus petits. Ça me semble plus joli, c'est plus simple, et on n'a pas besoin de bricoler avec les media queries. J'ai seulement gardé les media queries qui s'occupe de l'image en haut à droite : c'est cosmétique. Et pour tout dire, je pense que moins on utilise les media queries, mieux on se porte.

- il manquait le doctype (1re ligne du fichier)
- ajout de <meta name="viewport" content="width=device-width,initial-scale=1.0">
- déplacement de la 1re balise script dans <head>, elle était directement fille de la balise <html>, ce qui est incorrect
- l'id livraison sur 2 éléments (il ne peut y en avoir qu'un, j'ai supprimé celui qui me semble ne servir à rien)
- plusieurs autofocus (il ne peut y en avoir qu'un, je n'ai gardé que le premier)
- ajout d'une balise <h1> pour le titre du formulaire
- ajout de balises <label> autour des <input>
- utilisation des unités "em" autant que possible (les "px", c'est mal)
- multiples simplifications et changements de nom

Je ne me suis pas occupé du javascript.

En ce qui concerne les css, je n'ai pas touché au fichier css "polices.css". Je n'ai modifié que le fichier "formulaire.css".

J'ai testé, et ça me semble très acceptable même pour les résolutions de 320 pixels de large. Après, faut voir comment ça marche sur ton site. Il y a peut-être des contraintes supplémentaires qui nécessiteront des adaptations.

EDIT: j'ai aussi rajouté quelques petites modifications mineures, en particulier pour mieux afficher les inputs radio.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Formulaire de commande</title>
<link href="../css/formulaire.css" rel="stylesheet" type="text/css" />
<link href="../css/polices.css" rel="stylesheet" type="text/css" />

<script>
var prix=14.5;
var fdp=[];
fdp[0]=5.95;
fdp[1]=8;
fdp[2]=10;

function test_quantite(x)
{
	if ((x<1)||(x==null))
	{
		document.commande.quantite.value=1;
	}
	else
	{
        var p=prix;
		var pt1=p*x;
		var pt2=Math.round(pt1*100)/100; // arrondi à 2 decimales
             
        if (document.getElementById("livraison").checked)
        {
            val_fdp=fdp[x-1]; // pas de fdp si point relais
        }
		else val_fdp=0;
		
		document.commande.prix_total.value=pt2 + val_fdp;
        document.commande.fdp.value=val_fdp;
	}	
}
	
function valider()
{
	resultat=window.confirm('Desirez vous continuer ?');
	if (resultat==0) return false;
}

function relais(p)
{
	if (p==1)
    {
    	document.getElementById("relais").style.display='none';
    }
    else
	{
		document.getElementById("relais").style.display='block';
	}	
}   	
</script>
</head>
<body  >

<!-- PARTIE FLO -->  
<form name="commande" method="post" action="paiement/paypal1.php">
<h1>Formulaire de commande</h1>
 
<div class="fieldset"> 		
	<label>Nom
		<input type="text" required autofocus name="nom" placeholder="" value="">
	</label>
	<label>Prénom
		<input type="text" required name="prenom" placeholder="" value="">
	</label>
</div>
  
<div class="fieldset"> 		
  	<label>
  		<input type="radio" name="livraison" id="livraison" value="1" OnClick="relais(this.value);test_quantite(document.getElementById('quantite').value)">
  		Livraison à mon adresse (Payant)
  	</label>
  	<label>
  		<input type="radio" name="livraison" value="0" OnClick="relais(this.value);test_quantite(document.getElementById('quantite').value)">
  		Livraison dans notre point de retrait (Gratuit)
  	</label>
</div>

<div id="relais">Ecole de Voile Rochelaise - Avenue de la Capitainerie, 17000 La Rochelle</div> 

<div class="fieldset"> 		
	<label class="long">Adresse
		<input type="text" required name="adresse"  placeholder="" value="">
  	</label>
  	<label>Code&nbsp;postal
  		<input type="text" required name="code_postal" placeholder="" value="">
  	</label>
  	<label>Ville
  		<input type="text" required name="ville" placeholder="" value="">
  	</label>
</div>
  
<div class="fieldset"> 		
	<label>Email
		<input type="email" required  name="email" id="inputemail" placeholder="mail@example.com" value="">
  	</label>
  	<label>Quantité
  		<input type="number" required  min="1" max="3" name="quantite" id="quantite" placeholder="" OnChange="test_quantite(this.value)" value="1">
  	</label>
	<label>Frais de port + emballage
		<input type="text" readonly id="fdp" name="fdp" value="">
  	</label>
  	<label>Montant total
  		<input type="text" readonly id="prix_total" name="prix_total" value="">
	</label>
</div>

<div class="fieldset"> 		
	<label>Quel mois sommes nous ? (Je ne suis pas pas un robot - Entrer le n° du mois courant)
		<input type="text" required name="capcha" placeholder="" value="">
	</label>
</div>
  
<div class="fieldset"> 		
  	<label class="long">Message
  		<textarea rows=3 name="commentaire" id="commentaire" placeholder=""></textarea>
	</label>
	<div class="finalset">
  		<a href="javascript:document.commande.bt.click()">VALIDER</a>
    	<a href="javascript:window.close()">QUITTER</a>
	</div>
</div>

<div id="Img1">
	<img alt="unnamed" src="../css/unnamed.png">
</div>

<!--ce bouton est caché et il est actionné par l'image :
c'est pour faire fonctionner les options required des input qui ne s'affiche que sur submit
(mais pas par js)-->
<div class="hide">
	<input type="submit" name="bt" value="ok">
</div>

</form>

<script>
test_quantite(1);
relais(1);
document.getElementById("livraison").click();
</script>

</body>
</html>


Pour le css :
/* ===========================
   ====== Contact Form ======= 
   =========================== */
form[name="commande"] input[type="text"],
form[name="commande"] input[type="email"],
form[name="commande"] input[type="number"],
form[name="commande"] textarea {
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	box-sizing: border-box;
	margin: 0.5em 0 0 0;
	padding: 0.5em;
	border: 1px solid #E5E5E5;
	color: #000;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
form[name="commande"] input[type="text"],
form[name="commande"] input[type="email"],
form[name="commande"] input[type="number"] {
	width: 12.5em;
}
form[name="commande"] input[name="adresse"] {
	width: 27em;
	max-width: calc(100vw - 2em);
}
form[name="commande"] textarea {
	height: 6em;
	width: 27em;
	max-width: calc(100vw - 2em);
}
form[name="commande"] input[type="radio"] {
	margin: 0 auto;
}
form[name="commande"] input:hover, textarea:hover,
form[name="commande"] input:focus, textarea:focus {
	border: 1px solid #C9C9C9;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
/* ===========================
   ====== Submit Button ====== 
   =========================== */

input[type=submit] {
	width: 6em; 
	height: 2.5em;
	background-color: #474E69; 
	color: #FFF;
	border-radius: 3px;	
}
	
/******************* Flo ************************/
body {
  	background-color: #fece17;
  	margin: 0;
  	padding: 0;
}
form[name="commande"] {
	font-family: 'Open Sans', sans-serif;
}
form[name="commande"] h1 {
	background-color: #f4f4f4;
	color: #000;
	margin: 0;
	padding: 1em;
	text-align: center;
	font-family: "Khmer MN";
	font-size: 2.5em;
}
form[name="commande"] div.fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
form[name="commande"] div.finalset {
	padding: 1em;
}
form[name="commande"] label {
	margin: 1em;
	padding: 0;
}
form[name="commande"] label.long {
}
form[name="commande"] a {
	font-size: 1.5em;
	display: inline-block;
	color: #fff;
	background-color: #000;
	padding: 0.5em 1em;
	text-decoration: none;
	margin: 1em;
	font-weight: bold;
}
#relais
{
	text-align: center;
  	background-color: #ececec;
	padding: 1em;
	margin: 1em 10%;
}
#Img1 img {
    height: 12em;
    position: absolute;
    top: 2em;
    right: 0;
}
#prix_total {
	font-weight: bold;
}
/****************** Responsive **************************/
@media screen and (max-width: 1000px) {
	#Img1 img {
    	top: 4em;
	}
}
@media screen and (max-width: 720px) {
	#Img1 img {
  		display:none;
	}
}
/******************* Fin responsive *******************/

Amicalement,
Modifié par parsimonhi (29 Jul 2020 - 09:52)
Modérateur
Bonjour,

Raphael a écrit :
Hello,

Tu n'as pas de balise meta "viewport" dans ton header, ta page est donc toujours lue comme un écran desktop, même par les navigateurs mobiles.


Oui, oui, j'avais oublié de l'ajouter. Merci de l'avoir signalé.

Amicalement,