1486 sujets

Web Mobile et responsive web design

[Résolu] Centrer un logo en responsive

Bonjour
je recherche à savoir comment mettre mon logo qui et à droite dans ma page normale
et mettre mon logo au centre quand je suis en responsive
   <body>
        <header>
           
           <div class="header">
              <div class="logo"></div>
              <div class="banniere"></div>
          </div>
         
        </header>
    </body>
</html>


/*-- GENERAL --*/
body{
    margin: 0px;
    padding: 0px;
    background: linear-gradient(to bottom, #A2765D 0, #411d1D00 1050px) no-repeat;
    background-attachment: fixed !important;
}

/*-- HEADER --*/
.header {
    background-image: url(../img/header.jpg);
    width: 100%;
    height: 129px;
}

/*-- LOGO --*/
.logo {
    background-image: url(../img/logo.png);
    width: 235px;
    height: 91px;
   
}

/*-- BANNIERE --*/
.banniere {
    background-image: url(../img/banniere.jpg);
    width: 586px;
    height: 90px;
   
   
}


en vous remerciants d'avance
bonjour xavierlet
oui j'ai mis mon media query
voici le code que j'ai mis 

@media screen and (max-width: 660px){
    .banniere{
        display: none;
    }
    .logo{
        display: block;
        
        
    }
}
Et en essayant quelque chose comme ça :


@media screen and (max-width: 660px){
    .header {
        display: flex;
        justify-content: center;
    }


    .banniere{
        display: none;
    }
    .logo{
        display: block;
    }
}


C'est mieux ?
Je viens de voir que tu avais mis tes images dans le CSS en background-image. Pourquoi ?
Pourquoi ne pas faire tout simplement quelque chose comme ça :


    <body>
        <header>
           <div class="header">
              <div class="logo-block">
                  <img src="../img/logo.png" alt="Logo" class="logo">
              </div>
              <div class="banniere"></div>
          </div>
         
        </header>
    </body>




@media screen and (max-width: 660px){
    .header {
        display: flex;
        justify-content: center;
    }


    .banniere {
        display: none;
    }
    .logo-block {
        display: block;
        text-align: center;
    }

    .logo {
        width: 200px;
        height: auto;
    }
}
Sujet clos
Aller à