28172 sujets

CSS et mise en forme, CSS3

Problème BootStrap Responsive de Twitter

Salut @ tous !

Je mets en place sur mon site le Bootstrap Responsive de Twitter.
Le redimensionnement fonctionne bien sauf pour les règles @media (max-width: 480px) et @media (min-width: 980px) pour laquelle rien ne change.

Pour tester j'ajoute ce code dans une feuille de style perso (style.css) liée à la page :
@media (max-width: 480px) /* NE FONCTIONNE PAS */
{
div#test { background-color: red; }
}

@media (min-width: 481px) and (max-width: 979px)
{
div#test { background-color: cyan; }
}

@media (min-width: 980px) /* NE FONCTIONNE PAS */
{
div#test { background-color: green; }
}

Merci de m'aider à comprendre mon erreur...
Hello.

Sous quels navigateurs testes-tu? J'ai fait un rapide test de ton code et pas de souci pour moi sous les navigateurs récents.

Une page en ligne, ou un dabblet du code posant problème aideraient certainement à mieux cerner le problème.
Je fais mes tests sous FF 13. Ta page de test ne fonctionne pas pour la règle @media (max-width: 480px), la DIV ne devient pas rouge.

Voici mon code (j'utilise CodeIgniter) :
<!DOCTYPE html>
<html lang="fr">

	<head>
	
		<meta charset="utf-8">
	
		<title>
			Accueil
		</title>
	
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content=""> 
		<meta name="keywords"  content="">

		<link href="<?php echo base_url(); ?>bootstrap_2_0_4/css/bootstrap.css" rel="stylesheet">

		<style type="text/css">
			body { padding-top: 60px; padding-bottom: 40px; }
			.sidebar-nav { padding: 9px 0; }
		</style>
		
		<link href="<?php echo base_url(); ?>bootstrap_2_0_4/css/bootstrap-responsive.css" rel="stylesheet">
		<link href="<?php echo base_url(); ?>css/defaut/style.css" rel="stylesheet">

		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<link rel="shortcut icon" href="<?php echo base_url(); ?>ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo base_url(); ?>ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo base_url(); ?>ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo base_url(); ?>ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>ico/apple-touch-icon-57-precomposed.png">

	</head>

	<body>
	
		<div class="container">
		
			<div id="test">
				aaaaaaaa
				<br />
				bbbbbbbb
			</div>
			
		</div>

		<script src="<?php echo base_url(); ?>jq/jquery_1_7_2/jquery.min.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-transition.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-alert.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-modal.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-dropdown.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-scrollspy.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-tab.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-tooltip.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-popover.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-button.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-collapse.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-carousel.js"></script>
		<script src="<?php echo base_url(); ?>bootstrap_2_0_4/assets/js/bootstrap-typeahead.js"></script>

	</body>
	
</html>
Et voici mon css (je l'ai modifié, mais la règle @media (max-width: 480px) ne marche toutjours pas) : 

/* ************* */
/* MEDIA QUERIES */
/* ************* */

@media (max-width: 979px)
	{
	div#principal{ background-color: blue; !important; }
	}

@media (min-width: 1200px)
	{
	div#principal{ background-color: red; !important; }
	}

@media (max-width: 480px)
	{
	div#principal{ background-color: #4335b0 !important; }
	}

@media (min-width: 481px) and (max-width: 767px)
	{
	div#principal{ background-color: #e7a198 !important; }
	}

@media (min-width: 768px) and (max-width: 979px)
	{
	div#principal{ background-color: yellow !important; }
	}
	
@media (min-width: 980px) and (max-width: 1199px)
	{
	div#principal{ background-color: green !important; }
}
Je voulais dire la DIV ne prend pas la couleur de fond #4335b0 pour la règle @media (max-width: 480px)
6ber6ou a écrit :
@media (max-width: 480px)
{
div#principal{ background-color: #4335b0 !important; }
}
Salut,

merci Google alerte, je tombe sur ce même sujet. Je me permets de faire passer l'info pour les curieux, nous avons mis le doigt sur le problème : sur le siteduzero.

En fait FF n'a jamais trop aimé les 'petites largeurs' dans les @media-queries : la faute à Mozilla, à nos plugins... ? Grande question.

Ju
Vraiment bizarre, car de mon coté, la media-querie max-width: 480px est bien prise en compte sur le dabblet que j'ai posté précédemment.
Comme je l'ai dit sur le site du zéro, chez moi aussi ça fonctionne. J'avais constaté ce problème il y a une bonne année, depuis les maj ont jouer leur rôle. Par contre on peut suspecter certains plugins, voir certains OS.

Une chose est sûre, faire tourner des @media-queries à 480px ok, par contre en dessous ce n'est pas gagné. Il n'y qu'à observer le comportement sur Chrome & sur FF pour en être convaincu : à tester
Sujet clos
Aller à