Dimensionnement du logo pendant que vous êtes dans le mobile

Question

J'ai joint une image pour expliquer ce que j'essaie d'accomplir. Je voudrais avoir mon logo pour afficher similaire à l'image lorsqu'il est affiché sur mobile. Je ne sais pas si c'est un peu de rembourrage qui l'amène à s'asseoir dessus et non horizontal à l'onglet du menu.

Adresse du site Web est https://chris-schilling-jksc.squarespace.com/

Mot de passe est FSJ

Answer 1

Il affiche horizontale. mais ce que je ressens est, vous avez mis un height. Pourrait aider si vous supprimez ce style.

#header #logoWrapper, #header #logoImage { 
    width: 350px; 
    height: auto; 
} 

Et aussi il est préférable de le combiner avec les @media requêtes pour mobile si cela fonctionne pour le bureau.

@media screen and (max-width:640px) { 
    #header #logoWrapper, #header #logoImage { 
     width: 350px; 
     height: auto; 
    } 
} 
@media screen and (max-device-width:640px) { 
    #header #logoWrapper, #header #logoImage { 
     width: 350px; 
     height: auto; 
    } 
} 

Answer 2

Définissez la hauteur du logo sur Auto au lieu de 85px.

#header #logoWrapper, #header #logoImage { 
    width: 350px; 
    height: auto; 
} 

Answer 3

Ajouter ce css:

@media screen and (max-width:640px) { 
    #header #logoWrapper, #header #logoImage{ 
     height: auto; 
    } 
} 

Le problème était que la hauteur était définie qui fait paraître grand.

Answer 4

Vous avez une hauteur fixée pour #header #logoWrapper, #header #logoImage --- laissez-le à l'automobile et les éléments sont alignés en fonction de leur display: inline-blockvertical-align: middle

Je viens de vérifier dans les outils de dev.

Answer 5

Essayez ceci.

@media (max-width:640px){ 

    #logoImage a { 
    margin-top:20px; 
    } 

} 

REMARQUE: ne pas agrandir le logo car la largeur de l'iPhone est de 320px. Si vous augmentez la taille du logo, cette icône de menu disparaîtra sur le mobile.