1485 sujets

Web Mobile et responsive web design

Media queries non prises en compte

Bonjour,

J'essaye de créer des media queries pour adapter la taille de mon menu, mais mes media queries sont systematiquement ignorés par le navigateur qui préfère la feuille de style classique en ce qui concerne le menu... Voici le site, et ma media querie:


@media only screen and (min-width: 600px) and (max-width: 979px) {

/* DEBUG */
body:before{ 
content: "@media SCREEN (min-width: 600px) and (max-width: 979px) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9); /* Semi-transparent yellow */ position: fixed; bottom:0; left: 0; right: 0; z-index: 99; 
}
/* DEBUG */

  /*Changes on the menu */
  
  .logo{width: 71%;}
  
  .logo a h1{font-size:2em;}
  
  .logo_img {
    padding: 0 4% 0 2%;
	}
  
	div.mashmenu {
		width: 623px;
	}
	
	div.mashmenu ul.fnav li a span.level1{
		padding: 10px 5px 0 5px;
	}
  /*********************/
}


Merci d'avance pour votre aide =)
Administrateur
Bonsoir.

C'est OK chez moi (Chrome Windows).
Sur quel navigateur cela ne fonctionne-t-il pas ?
Pour moi ça ne marche sur aucun navigateur si je réduis la fenêtre, sur la capture d'écran on voit que les styles qui sont dans "bootstrap_responsive" sont barrés et que les styles généraux de docs.css sont utilisés...
Quand vous redimensionnez cela fonctionne?? Je ne comprends pas, je suis sur pc et sur firefox, chrome et safari les styles ne sont pas appliqués, comme montré sur la capture d'écran...
Bonjour,

J'ai le même problème que vous sur Safari et FF (mac).

Au validateur vous avez beaucoup d'erreurs à commencer par le Doctype qui semble absent....
Hum je ne comprends pas, le doctype et le reste est bien présent, mais apparemment le validateur ne les trouve pas... Ma balise head se presente comme ça:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<!--<meta name="google" content="notranslate">-->
		<meta http-equiv="Content-Language" content="en" />
        <title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <meta name="author" content="<?php bloginfo('name'); ?>">

         <?php  global $data; ?>
        
<!-- BEGIN include style
Les styles
</head>
Je googleise depuis une semaine, je cherche sur tous les forums possibles et imaginables mais je ne vois vraiment pas de solution, please help Smiley decu ((
tu as integré tes media querie dans doc.css ou dans bootstrap-responsive.css ?
Modifié par tazzkiller (22 Apr 2013 - 19:13)
ok, car quand je vais sur ton site pour la div logo que tu as mis en exemple c'est ton fichier doc.css qui applique le css de la ligne 51 et pas bootstrap-responsive.css alors je sais pas si tu as inversé l'ordre de chargement de tes css ou si tu as par mégarde glisser de nouveau media query dans celui ci
Sinon ça peu venir de ton profil Firefox aussi.
Parfois il joue des tours essaie ça :

Démarer/éxecuter/firefox.exe -p

Tu crée un nouveau profil (en gardant l'autre pour pas perdre tes favoris) et tu regarde si ton site fonctionne mieux.

Si ton profil est corrompu il peut survenir des erreurs d'affichages visible chez toi uniquement.
J'ai déjà eu le soucis y a 1 mois ou 2 de celà.

Edit :

Petite remarque, tu à des css qui aurait pu être évité et combinées à d'autres, c'est des requêtes pour rien.
Ainsi que tes codes js, c'est vachement le bordel, un peu partout dans ta page, et tu aurais pu les mettre dans un fichier .js ça aurait fais là même chose juste vérifie bien l'ordre d’exécution.

Mais bon avoir du js au début, au milieu et à la fin c'est un peu "nawak" si tu veux mon avis ^^ !
Modifié par Nyco (26 Apr 2013 - 23:22)
Sujet clos
Aller à