Bonjour,

Je souhaite créer une appli en mobile first et j'ai un problème de media query.
Le background-color de mon logo ne suis pas le CSS définit. Il passe du noir au rouge à partir de 1024px mais ne passe pas par les autres couleurs lorsque que je redimensionne ma fenêtre. j'ai testé sur Firefox, Edge même résultat. J'ai également vidé le cache des navigateurs.
Merci d'avance. 

#headerContainer_Logo{
       background-color: black;
}

@mediascreen and (min-width:481px) and (max-width: 768px){
#headerContainer_Logo{
background-color: darkblue;
  }
}

@mediascreen and (min-width:769px) and (max-width:1024px){
#headerContainer_Logo{
background-color: white;

  }

} 
@mediascreen and (min-width:1024px){
#headerContainer_Logo{
background-color: red;

  }
} 

-
Edité par grainde 24 septembre 2021 à 0:02:42

Ouep ! Merci, Modifié. Maintenant ça reste blanc jusqu'à 1024px ou ça devient rouge... les autres media queries ne sont pas pris en compte. Même le background-color de base(black) ne passe pas.
Ce que je souhaite faire c'est avoir un comportement spécifique
entre 481 et 768 px
entre 769 et 1024px
à partir de 1024px

Voici l'élément HTML

<header class="container-fluid" id="headerContainer">
    <div class="text-center" id="headerContainer_Logo">
        <img src="{{ asset('image/logo.png') }}" alt="logo" id="headerContainer_Logo_Img" >
    </div> 
</header>

-
Edité par grainde 21 septembre 2021 à 14:53:39

Bonjour,

As-tu pensé à ajouter la balise meta viewport dans le head de ton HTML ?

https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Exactement ça Mewen_bzh !

Merci bien.

Pour ceux que ça peut aider:

<meta name="viewport" content="width=device-width, initial-scale=1">

-
Edité par grainde 21 septembre 2021 à 17:17:47

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Media queries)