Partage
  • Partager sur Facebook
  • Partager sur Twitter

Media queries qui ne fonctionnent pas

Min-widht max-width

Sujet résolu
    21 septembre 2021 à 12:49:01

    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

    • Partager sur Facebook
    • Partager sur Twitter
      21 septembre 2021 à 13:12:50

      Tu as oublie le px dans le deuxieme max-width
      • Partager sur Facebook
      • Partager sur Twitter
        21 septembre 2021 à 14:02:26

        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

        • Partager sur Facebook
        • Partager sur Twitter
          21 septembre 2021 à 17:15:52

          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

          • Partager sur Facebook
          • Partager sur Twitter
            21 septembre 2021 à 19:27:22

            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)

            • Partager sur Facebook
            • Partager sur Twitter

            Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

            Media queries qui ne fonctionnent pas

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown