1485 sujets

Web Mobile et responsive web design

Bonjour,

Je souhaiterai que le menu compact du site [ http://www.sante-globale.fr/ ] soit toujours fermé lorsque l'on passe dans les basses résolutions.

1) Sous Firefox, j'utilise ctrl+maj+m pour tester les résolutions égales ou inférieures à 768*1024. Dans cette résolution (768*1024), un menu compact apparaît. Le problème est que ce menu est toujours ouvert !

2) Dans les résolutions inférieures, le menu est fermé mais le champs de recherche surplombe le bouton...

Pourriez-vous m'aider à résoudre ces petits problèmes ? Merci
Hello Smiley smile

En fait ce sont tes media queries, tu as :

@media screen and (max-width: 768px) {
}


et

@media screen and (min-width: 768px) {
	nav[role=navigation] ul.menu, div.menu ul { display:block !important; }
}


Donc à 768, tu as les 2 règles d'appliquées. Comme ta 2em a un gros important, elle gagne et ton menu est ouvert sur cette tranche de pixel bien précise. Si tu passes sous 768 tout est bon. Du coup inverse tes mq (le min avant le max), et fait en sorte de ne plus avoir le pixel qui est commun aux deux, par exemple min-width:768 et max-width:767

Pour ton 2em souci, il va falloir changer la taille de ta searchbox j'en ai bien peur.
En plein dans le mille !

Merci j'ai corrigé le problème.

Je vais essayer de regarder comment modifier la taille du champs de recherche, pour l'instant je n'y arrive pas. Ensuite je m'attaquerai au problème du logo, il faudrait que j'ai plusieurs tailles pour le logo qui correspondent aux résolutions.
cosimo a écrit :
il faudrait que j'ai plusieurs tailles pour le logo qui correspondent aux résolutions.


Ou un petit background-size Smiley cligne (CSS3)