[RÉGLÉ] Alignement logos sur smartphone beez3

[Casimirs82]

Bonjour à tous,

Je viens de modifier le fichier personnal.ccs afin que mon site soit aisément consultable sur smartphone. Tout est très bien mais quelques problèmes inesthétiques sont apparus :

- Sur smartphone, en mode portrait, les trois logos de mes partenaires sont positionnés en bas de page et sont disposés verticalement (l'un au dessus de l'autre) : cela est parfait et me convient tout à fait ! Mais en mode paysage, ces trois logos ne bougent pas et restent positionnés l'un sur l'autre alors que je souhaiterais avoir une disposition comme sur PC, c'est-à-dire l'un à côté de l'autre selon un alignement horizontal...

Quelle ligne de code dois-je ajouter pour forcer ces logos à se mettre en position horizontale comme sur un écran de PC ?

- En mode portrait, le menu principal est regroupé dans un onglet "Openmenu" (ce qui est fait naturellement avec beez3)...Comment corriger cela en remplaçant ""Openmenu" par "Menu principal" ?

Par avance merci pour votre aide. Ci-dessous, le code (pas très propre) que j'ai utilisé pour rendre mon site responsive (beez3 par défaut que j'ai complété) :

/* Partie responsive */
#mobile_select h2 {border:0; margin:-17px 0 0 0; padding:0; background:#0C1D43;text-align:right}
#mobile_select h2 a {
display:inline-block;
font-size:0.8em;
border-radius:4px 4px 0 0;
padding:6px;
font-size:0.75em;
margin-right:5px;
}


@media only screen and (max-width: 640px) {
	img { 
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


	#fontsize{display:none}
	#nav,#wrapper2,#wrapper,.cols-3,.column-1,.cols-3 .column-2,.cols-3 .column-3,#right,.box,#header form
   {
		float: none;
		width: 100%
	}
	#header {padding-top:3em}
	#header form  {margin:0}
	.logoheader {background:#0C1D43; min-height:100px; margin:0}
	.box {
		border-left: 0 !important;
		border-bottom: solid 1px #ddd;
	}
	#line {
		text-align: center;
		top: 0;
		right: auto;
		max-width: 100% ;
		min-width:100%;

		margin: 0 0px; background:#095197;
	}
	#header form input {
		float: none; margin-bottom:4px
	}
	#menuwrapper { margin-top:10px; }
	#header ul.menu {position:relative; top:0;left:20px; right:20px; margin:0; width:90%; border-radius:4px}
	#header ul.menu li:first-child a {border-radius: 4px 4px 0 0}
	#header ul.menu li:last-child a {border-radius:0 0 4px 4px }
	#header ul.menu li a:link,
	#header ul.menu li a:visited {
		display: block;
		padding: 6px 10px;
		border-bottom: solid 1px #ccc
	}
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5) , only screen and
		(min--moz-device-pixel-ratio: 1.5) , only screen and
	(min-device-pixel-ratio: 1.5) { /* Styles */
}


/* Responsive - Casimir82 */
/* change image de fond du logo */
#header .logoheader {
    background-color: #A7396D;
    background-repeat: no-repeat;
    background-size: contain; 
    background-position: top center;
  }

/* pour smartphones - mode portrait (maximum 480px) */
@media only screen and (max-width: 480px) {

/* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
  }

/* largeur des articles quand colonne de droite seule (position.css ligne 159) */
#wrapper {
    width: 78%;
  }  
   
/* supprime espace au-dessus du logo */
#all #header {
    padding-top: 0;
  }
    
/* change image de fond du logo */
#header .logoheader {
    background-image: url(../images/personal/monbandeau.png);
    min-height: 98px;
  }
    
/* positionne le menu mobile (a cause de firefox) */
#header #mobile_select {
   margin-top: 17px;
  }
}


/* pour smartphones - mode paysage (maximum 640px) */
@media (orientation: landscape) and (max-device-width: 640px) {
  /* supprime ligne taille de police */
#header #line {
    display: none;
    visibility: hidden;
  }

/* supprime espace au-dessus du logo */
#all #header {
    padding-top: 0;
  }
  
/* change image de fond du logo */
#header .logoheader {
    background-image: url(../images/personal/monbandeau.png);
    min-height: 174px;
  }
}

[lefabdu51]

Re : Alignement logos sur smartphone beez3

changer openmenu :
rechercher openmenu en tant que valeur via l outil de substituion des langues ( extension > gestion des langue > substitution).