Template Beez 3 - adapter logoheader sur écran smartphone

[Rajoz]

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Fabien,

;1039536]Bonsoir Rajoz

j'ai rajouté un header perso pour les mobiles = plus lisible

Il y a un petit souci avec la couleur du fond de l'image. Sur ton header mobile elle n'a pas la même teinte (#9f0053) que sur sur le header desktop (#a7396d).

Est-ce possible de faire en sorte que la bannière apparaisse sans marge blanche sur le mobile, c'est à dire qu'elle recouvre la totalité de la largeur de l'écran et qu'en bas elle soit collée au menu ?

Sur mon mobile (Samsung Galaxy Note 4) la bannière recouvre la largeur de l'écran que se soit avec Chrome ou avec Android Internet. Quel mobile as-tu ?

En regardant le fichier personal.css je m'aperçois de deux problèmes :

1. Les modifications ne sont pas à la fin : elles ne surchargent pas le code suivant (la partie responsive)
   ==> il faut mettre les modifications que j'ai proposées à la fin du fichier.
2. J'ai fait une faute de frappe, j'ai tapé un ] à la place d'un } : comme le code modifié n'est pas à la fin cela impacte tout le code suivant (la partie responsive)
   ==> il faut corriger le code (en rouge la correction) :
   

   #header #mobile_select {
           margin-top: 17px;
       [COLOR=#ff0000][B]}[/B][/COLOR]

Il faut faire les deux corrections indiquées avant que je puisse regarder comment modifier la largeur de la bannière pour ton mobile.

La hauteur me paraît plus compliquée car j'ai déjà eu des soucis à ce sujet avec Firefox qui ne réagit pas comme les autres navigateurs à ce sujet.

- sur le mobile, quand je clique sur "Afficher le menu", tout le menu n'apparaît pas. De plus, une fois ouvert, compliqué de le refermer. ?
- sur le mobile, en bas de page, les pieds de page avant étaient disposés les uns au dessous des autres. Maintenant, ils sont en "cascade". Possible de revenir à un affichage vertical plus "droit"?

A voir après la correction puisque la partie responsive du css est touchée par la position des modifications que j'avais proposées ainsi que par le typo.

Crois-tu que c'est possible de faire apparaître un menu comme sur mon autre site (sans avoir à cliquer sur "Afficher le menu")

Sur Protostar (que je connais beaucoup mieux), on peut facilement afficher ou masquer un module en fonction de la largeur de l'écran. On peut afficher seulement le module avec le menu horizontal sur les grands écrans et afficher seulement le module de menu vertical sur les petits écrans.
Sur Beez3, il faudra voir si en activant Bootstrap on peut faire pareil. mais cela risque d'avoir des effets de bord.

Amicalement,
Rajoz

[carasse64]

Re : Template Beez 3 - adapter logoheader sur écran smartphone

Bonsoir Rajoz

J'ai effectué les modifs.

J'ai changé la couleur du header sur le mobile et celle du bandeau bleu dans lequel apparaît "Afficher menu" (+couleur du texte en noir)
Problème de la bannière qui doit recouvrir toute la largeur de l'écran= résolu (pour info j'ai un Samsung 3)
Problème du menu = résolu. De plus, le menu se referme automatiquement quand je change de page = ****l. Ca m'aurait même donné envie d'avoir le même pour le site de la courseduboutdelan

Pour être pinailleur, ce qui bugue sur les mobiles :
- les pieds de page qui en fonction de la largeur de l'écran s'alignent soit à la verticale soit en cascade
- remplacer "Open menu" par "Afficher menu"
- supprimer la bande blanche entre la bannière et la bande grise dans laquelle apparaît "Afficher menu".

Egalement, j'ai fait une boulette : sur mon pc, quand je passe la souris sur les menus, ils ne se transforment plus en bleu. Je sais que c'est une histoire de "hover" mais en faisant mes manip j'ai du me planter et j'avais pas encore sauvegardé...

Voilà les dernières news !!!

Bonne soirée

Fabien