Taille du logo ne s'adapte pas

Bonjour,

Je suis heureuse d'avoir trouver un forum d'aide en français! Quel bonheur!

J'ai un problème de logo sur un site "responsive". Le logo demeure pleine largeur et se perd à l'extérieur du cadrage du site web sur iPhone. Je novice et je pars d'un template.

Si on regarde le Template de base, tout semble parfait car le logo utilisé par le concepteur est beaucoup moins large que le mien. Mais j'insère mon logo à la place du sien, ça ne fonctionne plus.

Voici le template en question:
http://luiszuno.com/blog/?s=zeni

Voici ma version en cours de modification:
blog.lanalanglois.com

Et voici le logo que je souhaite insérer:
http://blog.lanalanglois.com/img/logo.png

Je ne sais pas du tout si la modification doit être faite dans le code source de la page ou dans un des feuilles css, alors j'ai évité de vous coller n'importe quoi.

Voilà! Si une âme charitable pouvait me guider, svp!

Hello Lawnaw et bienvenue ici

Aucun de tes liens ne fonctionne Pour que cela fonctionne, il y a deux moyens (comme indiqué dans l'aide du forum) :
1- ne rien faire car le forum va automatiquement transformer les URL en liens cliquables
2- utiliser le bouton "lien" et ne pas oublier de renseigner la partie "url=http://]" (chez toi elle est vide)

Bonne journée

Première piste : ton image est problématique.
La taille totale de l'image est de 800px de large, et la partie visible (le logo) n'occupe que la moitié de cette taille. Il faudrait déjà commencer par recadrer le fichier png pour n'occuper que la taille du logo.

Ensuite, un petit img {max-width: 100%; height: auto;} devrait faire l'affaire.

Merci beaucoup Raphael pour cette précieuse aide!

"... ne pas oublier de renseigner la partie "url=http://]""

Désolée! Je n'avais pas bien compris comment bien le faire. Et ma plus grande erreur fut de ne pas tester mes liens. Merci de me pardonner!

Version en cours
Le template
http://blog.lanalanglois.com/img/logo_full.png

J'ai refais l'image avec une largeur de 300px. Le résultat est moins pire, mais la photo déborde encore sur la droite. Je pense que c'est dû à la marge qu'il y a avant l'image... donc il faudrait que je réduise encore davantage la taille du logo... Ce n'est pas du tout ce que je souhaite obtenir comme résultat, mais si je n'arrive vraiment pas à faire comme voulu, j'aurai toujours cette option.

Étape suivante:
Le {max-width: 100%; height: auto;} je me suis dit qu'il fallait le coller sur la feuille de style, mais étant donné que ça ramène davantage de débordement sur la droite, ça ne doit pas être ce que je devais faire.

#logo{
	display: -webkit-inline-flex;
	max-width: 100%; height: auto;
	padding-top: 40px;
	padding-bottom: 30px;}

#logo:hover{ opacity: 0.8;}

Note: Ce que je souhaite, c'est que le logo sur ordinateur soit environ la largeur du menu, mais sur un portable, qu'il prenne environ tout la largeur (sans déborder)... un peu comme le fait le diaporama.

Des corrections ou d'autres solutions?

Merci encore!
Modifié par Lawnaw (07 Jan 2017 - 11:55)

Bonjour Lawnaw,

Pour que le logo soit de la largeur du menu, il faudrait que l'image ait une largeur d'environ 400 px, puis ajouter ceci à la feuille de style :

@media only screen and (max-width: 767px){
	#logo img {
		max-width:100%;
		height:auto;
	}
}

En dessous de 767px (point de rupture déjà utilisé par le wrapper), on redimensionne la largeur de l'image à 100% de son conteneur, c'est à dire le wrapper qui englobe aussi le menu.


Edit : j'avais oublié 1 niveau d'accolades ^^
Modifié par Manhattan (07 Jan 2017 - 13:05)

Il était une fois, un moment d'euphorie!

Merci beaucoup Manhattan, ça fait exactement ce que je voulais!