Problème d'affichage des depuis la migration en V5.2
Le site ne s'adapte plus aux mobiles
Support des Thèmes
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Depuis la migration de mon site en V5.2, c'est visiblement un peu le cirque dans l'affichage de mes menus. Le thème a bien migré, mais il n'a pas repris les paramètres initiaux. DU coup, mon site ne s'affiche pas comme il faut. Et comme certaines fonctionnalités des menus ne sont plus accessibles aux revues d'écran depuis cette mise à jour, je ne peux par exemple plus choisir de faire ou pas afficher les menus sur un mobile. La case à cocher n'est plus cliquable par les revues.
Normalement :
- le menu d'entête est un menu horizontal déroulant
- le menu sous-en-ête est classique
- le menu, enfin les menus de gauches, sont verticaux,et le menu Mes diffuseurs est verticla déroulant, parce qu'il est long
- Les menus central haut, central bas et pied de page sont tout ce qu'il y a de plus classique.
* Je ne souhaite que s'affiche sur les mobiles que les menus : entête, sous-enteête, central bas et pied de page. Mais pour ce qui est du pied de page, je ne veux pas que le mini module Newsletter apparaisse sur les mobile, uniquement Immatriculation.
Peut-on me dire si c'est ce que l'on voit depuis chez vous et depuis vos mobile. Depuis mon Iphone8, ce n'est pas ça du tout
A vous lire.
Cordialement.
Sébastien Chauveau : journaliste, producteur, réalisateur
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
J'ai réussi à tout faire ou pas afficher ce que je voulais sur un mobile, sauf deux choses : le mini module de Newsletter s'affiche toujours sur les mobile, alors que j'ai bien coché la case pour qu'il ne s'affiche pas ; à l'inverse, le menu d'entête de page, qui est un menu horizontal déroulant, lui ne s'affiche pas, alors que là encore j'ai coché la case pour qu'il s'affiche. En clair, ça ne fait pas ce que je veux ce truc-là.
@Olivier
Si tu passes par-là, je t'ai remis en admin pour que tu puisses y jeter un oeil si c'est possible.
Merci.
Sébastien Chauveau : journaliste, producteur, réalisateur
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Je termine ma journée de travail et j'y regarde dès que j'arrive chez moi
Olivier.
Olivier
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Sébastien Chauveau : journaliste, producteur, réalisateur
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
En septembre 2017 lorsque tu as fait la migration 5.0 vers 5.1 tu as rencontré le même souci <a href="/forum/topic-16944+mon-site-n-est-plus-addaptatif.php">https://www.phpboost.com/forum/topic-16944+mon-site-n-est-plus-addaptatif.php</a>
Je t'invites à voir si tu peux suivre les instructions de Swan à ce propos ou attendre qu'elle passe par ici pour t'aider.
Concernant le mini menu newsletter qui ne doit pas s'afficher sur petits écrans, je ne comprends pas le problème.
<div class="formatter-container formatter-blockquote"><span class="formatter-title title-perso">sch :</span><div class="formatter-content"> le mini module de Newsletter s'affiche toujours sur les mobile, alors que j'ai bien coché la case pour qu'il ne s'affiche pas </div></div>Je confirme.
Je pose la question en interne ou peut-être qu'un autre membre de l'équipe trouvera la raison.
Olivier.
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Nous n'avons pas fait de changement HTML sur la V5.2 sur la gestion des formulaires.
La checkbox pour caché en mobile est toujours accessible via un label "Caché sur petit écran (mobile)".
Est-ce que tu peux nous en dire un peu plus car d’après le module d'accessibilité de Firefox, ca semble bien "visible" en revue d'ecran ?
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Sébastien Chauveau : journaliste, producteur, réalisateur
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Eh bien ça, je ne m'en souvenais plus. J'ai donc rétabli exactement les mêmes réglages que m'avait fait faire Swan, mais ça ne fonctionne pas.
Je remets les deux fichiers que l'on m'avait demandé de modifier :
cssmenu.css :
/*--------------------------------------------------------- * Theme : Thème ScoopOldPost * Par : EDN | Swan * Date : 30/07/2016 * Site web : http://easy-design.net/ * Commentaire ou autre de l'auteur # Merci de ne pas toucher au entête des fichiers CSS. *--------------------------------------------------------- * Porté par : EDN | Swan * Date V5.1 : 30/05/2017 /*-------------------------------------------------------- * Théme compatible avec deux menus (droite et gauche) le choix reste possible sur un menu *----------------------------------------------------------*/ /* -------------------------------------- cssmenu.css Contient les elements associes aux menus -----------------------------------------*/ /* -- Classes multi niveau -- */ /* -------------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu { font-size: 0; } .cssmenu, .cssmenu ul, .cssmenu ul li, .cssmenu ul li .cssmenu-title { position: relative; margin: 0; list-style: none; line-height: 1; left: auto; } .cssmenu { display: block; } header .cssmenu { display: inline-block; } .cssmenu ul, .cssmenu ul li, .cssmenu ul li .cssmenu-title { display: block; } .cssmenu:after, .cssmenu > ul:after { display: block; visibility: hidden; height: 0; content: ""; line-height: 0; clear: both; } .cssmenu-img { display: inline-block; } @media (max-width: 768px) { .cssmenu > .cssmenu-img { display: none; } .cssmenu-img { padding: 0px 5px 0px 0px; } } @media (min-width: 769px) { .cssmenu-img { padding: 10px 0 0 5px; vertical-align: top; } } .cssmenu-img-level-0 ~ ul.level-0 { display: inline-block; } .close { left: -9999px !important; height: 0; overflow: hidden; } #menu-left .cssmenu { margin-right: -9px; } #menu-right .cssmenu { margin-left: -9px; } #menu-left .cssmenu.small-screen { margin-right: 0; } #menu-right .cssmenu.small-screen { margin-left: 0; } .cssmenu li:hover > .cssmenu-title { text-decoration: none; } .cssmenu .cssmenu-title img { margin: 0 5px 0 0; vertical-align: bottom; } #top-header .cssmenu ul > li:first-child > .cssmenu-title { border-radius: 0 5px 0 0; } #top-header .cssmenu ul > li:last-child > .cssmenu-title { border-radius: 0 0 5px 5px; } #top-header .cssmenu ul > li.has-sub:first-child:hover > .cssmenu-title { border-radius: 0 0 0 0; } #top-header .cssmenu ul > li.has-sub:last-child:hover > .cssmenu-title { border-radius: 0 0 0; } .cssmenu.small-screen { width: 100%; } .cssmenu.small-screen ul { display: block; width: 100%; } .cssmenu.small-screen ul li { width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); } .cssmenu.small-screen > ul > li:last-child.has-sub { border-bottom: 1px solid rgba(120, 120, 120, 0.2); } .cssmenu.small-screen ul ul li, .cssmenu.small-screen li:hover > ul > li { height: auto; } .cssmenu.small-screen ul li .cssmenu-title, .cssmenu.small-screen ul ul li .cssmenu-title { padding: 17px; width: 100%; border-bottom: 0; } .cssmenu.small-screen ul ul li .cssmenu-title { padding: 11px; } @media (max-width: 768px) { .cssmenu.small-screen .cssmenu-img-level-0 + div { padding: 10px 40px 5px 17px; } } /* --- Variante cssmenu-horizontal --- */ #main .cssmenu-horizontal { background-color: #FFFFFF; } /* --- Variante cssmenu-group --- */ div.cssmenu-group { position: relative; display: inline-block; padding: 2px 8px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%); background-color: #FFFFFF; border-radius: 4px; border: 1px solid #999999; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25); color: #444444; cursor: pointer; } div.cssmenu-group .cssmenu-title { color: #444444; font-size: 1.2rem; font-weight: 300; text-decoration: none; } .cssmenu-group.small-screen { margin: 0 0 5px 0; } /* --- Variante cssmenu-actionslinks --- */ .cssmenu-actionslinks { margin: 0 0 20px 0; } .cssmenu-actionslinks { float: right; margin: 0 5px 5px 5px; } .cssmenu-actionslinks.small-screen { float: none; margin: 0; } .cssmenu.cssmenu-actionslinks ul li .cssmenu-title, .cssmenu.cssmenu-actionslinks ul li ul li .cssmenu-title { padding: 5px; border: none; font-weight: normal; font-size: 11px; } .cssmenu-actionslinks.small-screen ul li { border: none; } .cssmenu.cssmenu-actionslinks.small-screen ul li .cssmenu-title, .cssmenu.cssmenu-actionslinks.small-screen ul li ul li .cssmenu-title { padding: 10px 5px; } /* --- Autres variantes --- */ @media (min-width: 769px) { #cssmenu-galleryfilter ul { min-width: 130px; } } .cssmenu.cssmenu-static li.has-sub > .cssmenu-title:after, .cssmenu.cssmenu-static li.has-sub > .cssmenu-title:before { display: none; } /* -- Classes Niveau 1 -- */ /* ---------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu > ul > li { float: left; } #sub-header .cssmenu-horizontal > ul > li { position: relative; border-right: 1px solid #444444; } #sub-header .cssmenu-horizontal > ul > li:after { position:absolute; right: 1%; top: 50px; height: 100%; width: 1px; border-right: 1px solid #333333; } #main .cssmenu-horizontal > ul > li:last-child, #sub-header .cssmenu-horizontal > ul > li:last-child { border-bottom: none; } #main .cssmenu-horizontal > ul > li:last-child:after, #sub-header .cssmenu-horizontal > ul > li:last-child:after { width: 0; height: 0; } #main .cssmenu-horizontal > ul > li { position: relative; border-right: 1px solid #EFEFEF; } #main .cssmenu-horizontal.small-screen > ul > li { border-right: none; } #main .cssmenu-horizontal > ul > li:after { position:absolute; right: 1%; top: 50px; height: 100%; width: 1px; border-right: 1px solid #EEEEEE; } header .cssmenu-horizontal > ul > li:hover { border-radius : 5px 5px 5px 5px; } header .cssmenu-horizontal > ul > li.has-sub:hover { border-radius : 5px 5px 0 0; } .cssmenu-left > ul > li, .cssmenu-right > ul > li { float: none; text-align: left; } .cssmenu > ul > li > .cssmenu-title { padding: 17px; font-size: 12px; font-weight: 700; letter-spacing: 1px; } /* --- Indicateur de sous menu --- */ .cssmenu > ul > li.has-sub > .cssmenu-title { padding-right: 30px; } .cssmenu > ul > li.has-sub > .cssmenu-title:after, .cssmenu > ul > li.has-sub > .cssmenu-title:before { position: absolute; display: block; content: ''; } .cssmenu > ul > li.has-sub > .cssmenu-title:after { width: 8px; height: 2px; } .cssmenu > ul > li.has-sub > .cssmenu-title:before { width: 2px; height: 8px; transition: all 0.25s ease; } .cssmenu > ul > li.has-sub:hover > .cssmenu-title:before { height: 0; } .cssmenu-vertical > ul > li > .cssmenu-title { padding: 5px 17px 5px 6px; } .cssmenu > ul > li.has-sub > .cssmenu-title:after { top: 22px; right: 11px; } .cssmenu > ul > li.has-sub > .cssmenu-title:before { top: 19px; right: 14px; } .cssmenu > ul > li.has-sub:hover > .cssmenu-title:before { top: 23px; } .cssmenu-vertical > ul > li.has-sub > .cssmenu-title:after { top: 11px; } .cssmenu-vertical > ul > li.has-sub > .cssmenu-title:before { top: 8px; } /* --- Position des sous menu --- */ .cssmenu li:hover > ul { left: auto ; } aside .cssmenu-left li:hover > ul { left: 100% ; top: 0; } aside .cssmenu-right li:hover > ul { right: 100%; top: 0; } aside .cssmenu-left.cssmenu-static li:hover > ul { left: 0; top: 0; } aside .cssmenu-right.cssmenu-static li:hover > ul { right: 0; top: 0; } .cssmenu.cssmenu-actionslinks li:hover > ul { right: 0; top: 100%; } .cssmenu.cssmenu-actionslinks ul li:hover > ul { right: 100%; top: 0; } .cssmenu.small-screen li:hover > ul { left: 0; } .cssmenu.cssmenu-right.small-screen li:hover > ul { right: 0; } .cssmenu.cssmenu-left.small-screen li:hover > ul { left: 0; } /* --- Variante cssmenu-group --- */ .cssmenu-group > ul { text-align: center; font-size: 0; } .cssmenu-group > ul > li { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%); background-color: #FFFFFF; border: 1px solid #999999; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25); color: #444444; cursor: pointer; } .cssmenu.cssmenu-group > ul > li { display: inline-block; float: none; } .cssmenu.cssmenu-group > ul > li:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 40%,rgba(56, 56, 56, 0.18) 100%); background-color: #F0F0F0; border-bottom-color: #B3B3B3; } .cssmenu-group > ul > li:first-child { border-radius: 4px 0 0 4px; border-left: 1px solid rgba(0, 0, 0, 0.1); } .cssmenu-group > ul > li:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid rgba(0, 0, 0, 0.1); } .cssmenu-group > ul > li.current { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%); background-color: #F0F0F0; border-top-color: #B3B3B3; } .cssmenu.cssmenu-group > ul > li > .cssmenu-title { padding: 4px 12px; color: #444444; font-size: 1.1rem; font-weight: 300; text-decoration: none; } .cssmenu-group.small-screen > ul.open { display: table !important; margin: auto; width: auto; } .cssmenu-group.small-screen > ul > li, .cssmenu-group.small-screen > ul > li:hover { float: left; width: auto; background: transparent; border-radius: 0; border: none; clear: both; } .cssmenu.cssmenu-group.small-screen > ul > li > .cssmenu-title { padding: 10px 12px; } .cssmenu-group.small-screen > ul > li:first-child { border-radius: 4px 4px 0 0; } .cssmenu-group.small-screen > ul > li:last-child { border-radius: 0 0 4px 4px; } /* --- Variante cssmenu-actionslinks --- */ .cssmenu-actionslinks.small-screen > ul > li:last-child { padding: 0 0 10px 0; border-bottom: 1px solid rgba(120, 120, 120, 0.2); } .cssmenu.cssmenu-static li > .cssmenu-title { border: none; } .cssmenu.cssmenu-static > ul > li > .cssmenu-title { text-align: center; } /* --- Variante cssmenu-static --- */ #main .cssmenu.cssmenu-static, #top-footer .cssmenu.cssmenu-static { margin: 5px 0; background-color: #ffffff; border: 1px solid #BEBEBE; } .cssmenu.cssmenu-static > ul > li { padding: 0 10px 0 10px; } footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #2A2A2A; } #top-footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #DDDDDD; } footer .cssmenu.cssmenu-static > ul > li:last-child, #top-footer .cssmenu.cssmenu-static > ul > li:last-child { border-right: none; } .cssmenu.cssmenu-static > ul > li > .cssmenu-title { margin: 0 0 20px 0; padding-bottom: 5px; border-bottom: 1px solid #25466C; font-size: 17px; font-weight: bold; } /* -- Classes Niveau 2 -- */ /* ---------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu ul ul { position: absolute; left: -9999px; z-index: 10; } .cssmenu ul ul li { height: 0; transition: all 0.25s ease; } .cssmenu li:hover > ul > li { height: auto; vertical-align: middle; } .cssmenu ul ul ul { top: 0; } .cssmenu ul ul li .cssmenu-title { padding: 11px 15px; font-size: 12px; } .cssmenu ul ul li .cssmenu-title { padding: 11px 30px 11px 15px; border-bottom: 1px solid rgba(150, 150, 150, 0.15); white-space: nowrap; } /* --- Indicateur de sous menu --- */ .cssmenu ul ul li:last-child > .cssmenu-title, .cssmenu ul ul li.last-item > .cssmenu-title { border-bottom: 0; } .cssmenu ul ul li.has-sub > .cssmenu-title:after, .cssmenu ul ul li.has-sub > .cssmenu-title:before { position: absolute; display: block; content: ''; } .cssmenu ul ul li.has-sub > .cssmenu-title:after { width: 8px; height: 2px; } .cssmenu ul ul li.has-sub > .cssmenu-title:before { width: 2px; height: 8px; transition: all .25s ease; } .cssmenu ul ul li.has-sub > .cssmenu-title:after { top: 16px; right: 11px; } .cssmenu ul ul li.has-sub > .cssmenu-title:before { top: 13px; right: 14px; } .cssmenu ul ul > li.has-sub:hover > .cssmenu-title:before { top: 17px; height: 0; } .cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:after, .cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:before { display: none; } .cssmenu.small-screen ul.level-1 li .cssmenu-title { padding-left: 25px; } .cssmenu.small-screen ul.level-2 li .cssmenu-title, .cssmenu.cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title { padding-left: 35px; } .cssmenu.small-screen ul.level-3 li .cssmenu-title { padding-left: 45px; } .cssmenu.small-screen ul.level-4 li .cssmenu-title { padding-left: 55px; } .cssmenu.small-screen ul ul li .cssmenu-title { background: none; } .cssmenu.small-screen ul ul, .cssmenu.small-screen ul ul ul { position: relative; left: 0; width: 100%; margin: 0; border: none; text-align: left; } /* --- Variantes --- */ .cssmenu-horizontal ul ul ul { margin-left: 100%; } .cssmenu-vertical ul ul { position: relative; } aside .cssmenu-vertical ul ul { position: absolute; margin-top: -1px; border: 1px solid #BEBEBE; } header .cssmenu-vertical ul ul li .cssmenu-title, #main .cssmenu-vertical ul ul li .cssmenu-title { padding: 5px 15px; width: 100%; border-bottom: none; } .cssmenu-static ul ul { position: relative; left: 0; z-index: 0; } .cssmenu-static ul ul li { height: auto; } .cssmenu-static ul ul ul { margin-left: 0; } .cssmenu.cssmenu-static ul ul > li > .cssmenu-title { padding-left: 10px; } .cssmenu.cssmenu-static ul ul ul > li > .cssmenu-title { padding-left: 20px; } .cssmenu-actionslinks ul li.has-sub .cssmenu-title:after { top: 9px; } .cssmenu-actionslinks ul li.has-sub .cssmenu-title:before { top: 6px; } /* -- Personnalisation graphique -- */ /* -------------------------------- */ /* --- Niveau 1 --- */ header .cssmenu > ul > li > .cssmenu-title {color: #333333;} .cssmenu.cssmenu-vertical > ul > li > .cssmenu-title { color: #444444; } #main .cssmenu > ul > li > .cssmenu-title { color: #444444; } .cssmenu-actionslinks > ul > li > .cssmenu-title { color: #666666; } footer .cssmenu-static > ul > li > .cssmenu-title { color: #DDDDDD; } #top-footer .cssmenu-static > ul > li > .cssmenu-title { color: #444444; } header .cssmenu li:hover > .cssmenu-title {color: #AAAAAA;} .cssmenu.cssmenu-vertical li:hover > .cssmenu-title { color: #666666; } #main .cssmenu li:hover > .cssmenu-title { color: #666666; } @media (min-width: 769px) { header .cssmenu-horizontal > ul > li:hover { background-color: #333333; } #main .cssmenu-horizontal > ul > li:hover { background-color: #F9F9F9; } } /* --- Niveau 2 --- */ .cssmenu ul ul li .cssmenu-title { color: #AAAAAA; } #main .cssmenu ul ul li .cssmenu-title { color: #333333; } .cssmenu.cssmenu-vertical ul ul li .cssmenu-title { color: #333333; } .cssmenu-actionslinks li ul li .cssmenu-title { color: #666666; } aside .cssmenu-static li ul li .cssmenu-title, #top-footer .cssmenu-static li ul li .cssmenu-title { color: #666666; } .cssmenu ul ul li:hover > .cssmenu-title { color: #333333; } header .cssmenu ul ul li:hover > .cssmenu-title {color: #CCCCCC;} #main .cssmenu ul ul li:hover > .cssmenu-title { color: #555555; } .cssmenu.cssmenu-vertical ul ul li:hover > .cssmenu-title { color: #555555; } .cssmenu-actionslinks li:hover > .cssmenu-title { color: #333333; } footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #FFFFFF; } #top-footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #262626; } .cssmenu.cssmenu-vertical ul ul li .cssmenu-title { background-color: #FFFFFF; } .cssmenu-actionslinks ul li:hover > .cssmenu-title:after { background-color: #333333; } header .cssmenu ul ul li .cssmenu-title { background-color: #333333; } .cssmenu-actionslinks li:hover > .cssmenu-title { background-color: #DDDDDD; } .cssmenu-actionslinks.small-screen li:hover > .cssmenu-title { background-color: transparent;} #main .cssmenu-horizontal ul ul { background-color: #F9F9F9; } #main .cssmenu-horizontal ul ul > li:hover { background-color: #F1F1F1; } #cssmenu-galleryfilter ul ul li .cssmenu-title { background-color: #FFFFFF; } #cssmenu-galleryfilter ul ul li:hover .cssmenu-title { background-color: #DDDDDD; } /* --- Personnalisation de l'indicateur de sous-Menu --- */ .cssmenu li.has-sub > .cssmenu-title:after, .cssmenu li.has-sub > .cssmenu-title:before { background-color: #DDDDDD; } .cssmenu-vertical li.has-sub > .cssmenu-title:after, .cssmenu-vertical li.has-sub > .cssmenu-title:before { background-color: #444444; } /* -- Bouton responsive -- */ /* ----------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu .menu-button { display: none; position: relative; list-style: none; line-height: 1; font-size: 1.2rem; } .cssmenu .menu-button:before { font-size: 1.3rem; } .cssmenu.small-screen .menu-button { display: block; padding: 17px 40px 17px 17px; text-transform: uppercase; font-weight: 700; cursor: pointer; } #top-footer .cssmenu.small-screen .menu-button { color: #444444; } .cssmenu.small-screen .menu-button:after, .cssmenu.small-screen .menu-button:before { position: absolute; display: block; content: ''; } .cssmenu.small-screen .menu-button:after { height: 4px; width: 20px; border-width: 2px 0 2px 0; border-style: solid; } .cssmenu.small-screen .menu-button:before { height: 2px; width: 20px; background-color: #DDDDDD; font-size: 1.3rem; } .cssmenu.small-screen .menu-button.menu-opened:after { height: 2px; border: 0; transform: rotate(45deg); } .cssmenu.small-screen .menu-button.menu-opened:before { transform: rotate(-45deg); } /* --- Position du bouton --- */ .cssmenu.small-screen .menu-button:after { top: 22px; right: 17px; } .cssmenu.small-screen .menu-button:before { top: 16px; right: 17px; } .cssmenu.small-screen .menu-button.menu-opened:after, .cssmenu.small-screen .menu-button.menu-opened:before { top: 23px; width: 15px; } /* --- Variante cssmenu-actionslinks --- */ .cssmenu .menu-button:before { font-size: 1.3rem; } .cssmenu-actionslinks .menu-button { float: right; position: relative; display: inline-block; padding: 4px 12px 4px 12px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56,56, 56, 0.18) 100%); background-color: #FFFFFF; border: 1px solid #999999; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25); border-radius: 4px; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; color: #444444; text-align: center; cursor: pointer; -webkit-font-smoothing: antialiased; } @media (min-width: 769px) { .cssmenu-actionslinks .menu-button { font-size: 0; } } #main .cssmenu-actionslinks.small-screen .menu-button { float: none; background-color: transparent; background-image: none; border: none; font-family: "Trebuchet MS",Verdana,"Bitstream Vera Sans",Times,serif; text-align: left; } .cssmenu-actionslinks .menu-button + ul { left: -9999px; } .cssmenu-actionslinks .menu-button:hover + ul, .cssmenu-actionslinks .menu-button + ul:hover{ left: auto; } .cssmenu-actionslinks.small-screen .menu-button:hover + ul, .cssmenu-actionslinks.small-screen .menu-button + ul:hover { left: -9999px; } .cssmenu-actionslinks.small-screen .menu-button + ul.open, .cssmenu-actionslinks.small-screen .menu-button + ul:hover.open { left: auto; } .cssmenu-actionslinks .menu-button:before { content: "\f013"; } .cssmenu-tools .menu-button:before { content: "\f0c9"; } .cssmenu-actionslinks ul { position: absolute; z-index: 10; right: 0; top: 23px; padding: 5px 0; width: 170px; background-color: #FFFFFF; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border: 1px solid #AAAAAA; font-size: 11px; } .cssmenu-actionslinks.small-screen ul { top: 100%; border: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .cssmenu-actionslinks.small-screen li.has-sub > a, .cssmenu-actionslinks.small-screen li.has-sub > .submenu-button { display:none; } .cssmenu-actionslinks.small-screen li.has-sub > ul { display: block !important; padding: 0; } /* --- Variante tools --- */ .cssmenu-tools.small-screen li.has-sub > a, .cssmenu-tools.small-screen li.has-sub > .submenu-button { display: block; } /* --- Variante Static --- */ .cssmenu-static.small-screen .menu-button { cursor: default; } .cssmenu-static.small-screen .menu-button:after, .cssmenu-static.small-screen .menu-button:before { display: none; } .cssmenu-static.small-screen ul li { border-top: none; } .cssmenu-static.small-screen > ul > li > .cssmenu-title, .cssmenu-static.small-screen ul ul > li > .cssmenu-title { padding-bottom: 5px; } /* --- Personnalisation graphique du bouton responsive--- */ .cssmenu.small-screen .menu-button:after { border-color: #DDDDDD; } #main .cssmenu.small-screen .menu-button { color: #111111; } .cssmenu.small-screen .menu-button:before { background-color: #DDDDDD; } .cssmenu.small-screen .menu-button.menu-opened:after, .cssmenu.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; } header .cssmenu.small-screen .menu-button.menu-opened:after, header .cssmenu.small-screen .menu-button.menu-opened:before {background-color: #CCCCCC;} header .cssmenu-vertical.small-screen .menu-button.menu-opened:after, header .cssmenu-vertical.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; } header .cssmenu-tools.small-screen .menu-button.menu-opened:after, header .cssmenu-tools.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; } /* -- Bouton submenu -- */ /* -------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:before, .cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:after { display: none; } .cssmenu.small-screen .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; height: 46px; width: 46px; border-left: 1px solid rgba(120, 120, 120, 0.2); cursor: pointer; } .cssmenu.small-screen ul ul .submenu-button { height: 34px; width: 34px; } .cssmenu.small-screen .submenu-button:after, .cssmenu.small-screen .submenu-button:before { position: absolute; display: block; content: ''; } .cssmenu.small-screen .submenu-button:after { width: 8px; height: 2px; } .cssmenu.small-screen .submenu-button:before { width: 2px; height: 8px; } .cssmenu.small-screen .submenu-button.submenu-opened:before { display: none; } .cssmenu-actionslinks.small-screen .submenu-button { height: 31px; width: 31px; border: none; } /* --- Variante Static --- */ .cssmenu-static.small-screen .submenu-button, .cssmenu-static.small-screen .submenu-button:after, .cssmenu-static.small-screen .submenu-button:before { display: none; } .cssmenu-static.small-screen ul ul, .cssmenu-static.small-screen ul ul ul { display: block !important; } /* --- Personnalisation background Bouton submenu --- */ .cssmenu.small-screen .submenu-button:after { background-color: #DDDDDD; } .cssmenu.small-screen .submenu-button:before { background-color: #DDDDDD; } .cssmenu.small-screen .submenu-button.submenu-opened:after {background-color: #CCCCCC;} .cssmenu.small-screen .submenu-button.submenu-opened { background-color: #262626; } #top-header .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(255, 255, 255, 0.05); } .cssmenu-actionslinks.small-screen .submenu-button.submenu-opened { background-color: #DDDDDD; } #menu-left .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); } #menu-right .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); } /* --- Postion icone Submenu --- */ .cssmenu.small-screen .submenu-button:after { top: 22px; right: 19px; } .cssmenu.small-screen .submenu-button:before { top: 19px; right: 22px; } .cssmenu.small-screen ul ul .submenu-button:after { top: 15px; right: 13px; } .cssmenu.small-screen ul ul .submenu-button:before { top: 12px; right: 16px; } .cssmenu-actionslinks.small-screen .submenu-button:after { top: 14px; right: 11px; } .cssmenu-actionslinks.small-screen .submenu-button:before { top: 11px; right: 14px; }
Sébastien Chauveau : journaliste, producteur, réalisateur
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
J'ai relu toute la discussion que nous avions eu n 2017 pour la migration précédente. Les deux fichiers que j'ai posté ci-dessus sont visiblement les synthèses des modifications à apporter pour que :
- Le thème s'affiche correctement sur les mobiles
- Les couleurs des liens soient bien visibles
- Les vidéos que j'ai en page d'acueil ne pose pas de souci à l'affichage sur mobile.
- Il fallait mettre les menus déroulants en automatique. Je l'ai fait.
- Il n'y a que les cachs que j'ai oublié de désactivé.
Malgré tout ça, je ne comprends pas pourquoi ça ne fonctionne pas sur mobile. C'était ennuyeux en 2017. Ca l'est encore plus aujorud'hui, avec la place que prennent les consultations sur mobile.
A vous lire.
Cordialement.
Sébastien Chauveau : journaliste, producteur, réalisateur
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Personne n'a une idée ? Ne me reste-t-il que ces deux solutions : soit revenir à la 5.1 ou me séparer de mon thème pour éviter les problèmes de compatibilité sur les mobiles à chaque changement majeur de version ? Il est pourtant bien indiqué dans la description du lien de téléchargement de la dernière MAJ du thème qu'il est adaptatif Hors ce n'est pas le cas, a priori. On ne peut plus aujourd'hui s'exonérer des visiteurs sur mobiles. Les Ibidules sont devenus trop importants.
A vous lire.
Cordialement.
Sébastien Chauveau : journaliste, producteur, réalisateur
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
tu n'es pas sans savoir que l'équipe est bénévole et travail a coté...un peu de patience.
Je comprend ta frustration que le thème ne soit pas 100% opérationnel mais nous allons remédier à ce problème.
est-ce que tu peux nous fournir un acces à ton ftp que l'on réalise quelques tests sur le template ?
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
J'entends et comprends bien. Nous travaillons tous à côté
Le tout est juste de savoir si ça vient de chez moi ? Si ça vient du thème ? S'il vaut mieux que j'abandonne ce thème, car je rencontre à chaque fois le même souci... Une fois qu'il est calé, tout va bien. Mais à chaque migration...
Je te passe un accès FTP en MP.
Merci et bien toi.
Sébastien Chauveau : journaliste, producteur, réalisateur
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie