Jump to content
GPOC27

[Résolu] Augementer Logo - Version Mobile

Recommended Posts

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!

 

image.thumb.png.502db848be47d74381dba35a7287248a.png

 

Edited by GPOC27
résolu (see edit history)

Share this post


Link to post
Share on other sites
il y a 15 minutes, GPOC27 a dit :

pour faire des modifications sur mon logo sur la version mobile

Bonjour,

quelles modifications ?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

C'est plus propre.

Share this post


Link to post
Share on other sites
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%;
    }
}

Share this post


Link to post
Share on other sites

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

456355814_Screenshot_2019-03-16LePetitMot.png.93a5a3be403a609abc95b9f3b4c7e6e2.png

Share this post


Link to post
Share on other sites
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

456355814_Screenshot_2019-03-16LePetitMot.png.93a5a3be403a609abc95b9f3b4c7e6e2.png

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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%;
}
   
}1070745080_Screenshot_2019-03-17LePetitMot.png.83dc1ca1d0456527a7607f5330578f94.png

 

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

Merci beaucoup!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More