[Résolu] Augementer Logo - Version Mobile

[GPOC27]

Bonjour,

Je galère à trouver le bon fichier pour faire des modifications sur mon logo sur la version mobile.

Je voudrais surtout augmenter sa taille, car il apparaît tout petit en version mobile.

J'ai essayé: /public_html/themes/sellon/_dev/css/theme.scss (partie 'responsive part'):

/*** Responsive part ***/
@include media-breakpoint-down(sm) {
  #wrapper {
    box-shadow: none;
  }
  #checkout-cart-summary {
    float: none;
    width: 100%;
    margin-top: 1rem;
  }
  #header {
    background: $gray-light;
    .header-nav {
      max-height: 50px;
      background: white;
      margin-bottom: rem(10px);
      color: $gray-darker;
      #menu-icon {
          .material-icons{
              color: white;
          }
      }
      .logo{
          margin-top: 0px;
      }
      .top-logo {
        line-height: 50px;
        vertical-align: middle;
        width: 100px;
        margin: 0 auto;
        padding-top: rem(10px);
        a {
          img {
            max-height: 50px;
            max-width: 80%;
          }
        }
      }

 

J'ai fait pas mal de testes avec ce fichier mais rien ne bouge.

Je me demande alors si je suis sur le bon fichier ou pas..

Merci pour votre aide!

 

 

Edited March 17, 2019 by GPOC27
résolu (see edit history)

[Mediacom87]

il y a 15 minutes, GPOC27 a dit :

pour faire des modifications sur mon logo sur la version mobile

Bonjour,

quelles modifications ?

[GPOC27]

1 minute ago, Mediacom87 said:

Bonjour,

quelles modifications ?

Pardon, je n'ai pas précisé.

Surtout augmenter la taille, il apparaît tout petit sur version mobile.

[Mediacom87]

il faut effectuer vos personnalisation sur le fichier custom.css de votre template.

C'est plus propre.

[GPOC27]

6 minutes ago, Mediacom87 said:

il faut effectuer vos personnalisation sur le fichier custom.css de votre template.

C'est plus propre.

 

Merci.

J'avais aussi faire un test là, en modifiant max-height et width. Rien ne change..

Faudrai-t-il ajouter une commande?

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
#header .logo{
    max-height: 100px
}
#_desktop_top_menu #top-menu .top-menu{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
@media (max-width: 767px){
    #header .header-nav .top-logo a img {
        width: 100%;
    }
}

[Mediacom87]

Vous avez tous les outils pour tester en direct ce qui fonctionne donc testez et hop par magie vous verrez que cela fonctionne mais encore faut il savoir ce que l'on fait.

#header .header-nav .top-logo {
	line-height: 50px;
	vertical-align: middle;
	/* width: 100px; */
	margin: 0 auto;
	/* padding-top: .625rem; */
}

#header .header-nav .top-logo a img {
	/* width: 100%; */
}

et voilà le résultat

[GPOC27]

24 minutes ago, Mediacom87 said:

Vous avez tous les outils pour tester en direct ce qui fonctionne donc testez et hop par magie vous verrez que cela fonctionne mais encore faut il savoir ce que l'on fait.

#header .header-nav .top-logo {
	line-height: 50px;
	vertical-align: middle;
	/* width: 100px; */
	margin: 0 auto;
	/* padding-top: .625rem; */
}

#header .header-nav .top-logo a img {
	/* width: 100%; */
}

et voilà le résultat

Merci pour votre réponse.

Mais cela n'a pas modifié la taille du logo. J'ai essayé vos codes sur custom.css et sur theme.scss, entre autres essais.

Je continue à fouiller les dossiers pour voir si je trouve la réponse!

Merci en tout cas.

[Mediacom87]

Perso je ne trouve  aucune de ces modifications sur votre site.

Vous les faites en local ???

car si vous ne retirez pas les choses qui sont déjà en place, ce que je vous donne ne changera rien.

Vous ne savez pas ce que vous faites donc pas la peine de vous donner plus de pistes à moins de le faire à votre place.

[GPOC27]

10 minutes ago, Mediacom87 said:

Perso je ne trouve  aucune de ces modifications sur votre site.

Vous les faites en local ???

car si vous ne retirez pas les choses qui sont déjà en place, ce que je vous donne ne changera rien.

Vous ne savez pas ce que vous faites donc pas la peine de vous donner plus de pistes à moins de le faire à votre place.

Vous ne trouvez pas car je les ai enlevé une fois testé et pas fonctionné. J'ai remis les anciennes configurations.

Je n'ai pas dit que j'étais un expert, je m'y connais très peu, et c'est pour cela que je suis venu ici (et pas sur la catégorie du forum dédiée aux développeurs) demander de l'aide à quelqu'un qui sache où trouver la bonne ligne du code à modifier, parmi les dossiers du serveur ftp.

Merci

[Mediacom87]

J'ai proposé les modifications, je ne peux pas les tester en réel donc je ne fais que imaginer comment faire.

Il faut certainement des ajustements mais impossible de vous les proposer sans test.

[GPOC27]

Bon après plusieurs essais, votre code a bien fonctionné sur custom.css:

@media (max-width: 767px) {
#header .header-nav .top-logo {
    line-height: 50px;
    vertical-align: middle;
    width: 167px;
    margin: 0 auto;
    padding-top: 0.1rem;
}

#header .header-nav .top-logo a img {
    width: 100%;
}
   
}

 

Prochain défi, inverser la couleur noir avec la blanche, du bouton de menu et du bouton de panier.

Merci beaucoup!