[RÉGLÉ] Permettre inscription newsletter sur smartphone

[hervelam]

Bonjour,
Sur mon site dans le bandeau d'en-tête j'ai inclus une zone pour permettre au visiteur de s'abonner à la newsletter.
Il s'agit d'un module AcyMailing que j'affecte à la position ad hoc de mon template.
Mais seulement sur la version ordi de mon site.
Car, sur conseil (judicieux) de quelqu'un de ce forum, je l'ai enlevé de la version smartphone parce que ça faisait un en-tête trop chargé.

D'où ma question à présent : Comment permettre l'inscription à la newsletter sur smartphone ?
J'avais dans l'idée d'ajouter un menu qui dirigerait sur une page contenant le champ/formulaire d'inscription.
Sauf qu'AcyMailing c'est un module, donc pour l'afficher je suis obligé de l'affecter à une position d'un template, je ne peux pas l'inclure dans une page.
Que me conseilleriez-vous donc, SVP ?

En vous remerciant,
À bientôt,
Hervé

[RobertG]

Bonjour,

Tu peux afficher un module dans un article et donc avoir un lien de menu affichant l'article qui affiche le module.

[hervelam]

Bonjour,

Tu peux afficher un module dans un article et donc avoir un lien de menu affichant l'article qui affiche le module.

J'ai réussi à faire ça (grâce à https://forum.joomla.fr/forum/joomla...ans-un-article)

Le problème est... qu'il ne s'affiche toujours pas sur mobile, puisque dans le user.css de mon template j'ai :

/* pour supprimer le formulaire de mailing list si écran moins large que 422 */
@media screen and (max-width: 422px) {
  .acym_module_form {
    display: none!important;
  }
}​

Comment faire ? J'ai l'impression de tourner en rond

Hervé

[RobertG]

Bonjour,

Tu trouveras peut-être la solution ici : https://web-eau.net/tutoriels-joomla...sur-smartphone
Un module en bandeau avec une classe pour le masquer sur petits écrans (et plus d'utilisation du code que tu cites) et un autre placé dans l'article, avec une casse bloquant l'affichage sur les écrans autres que smartphone.

[hervelam]

Bonjour,

Il faut donc que je duplique mon module (un pour mettre en bandeau, et un autre pour mettre dans l'article) ?

Hervé

[RobertG]

Bonjour,

Je pense en effet que c'est une solution.

[hervelam]

J'ai fait un module "Formulaire d'abonnement (bandeau)", avec classe du module = d-none d-lg-block
et un module "Formulaire d'abonnement (article)", sans classe du module.

...Mais ça ne marche pas : le formulaire d'abonnement dans le bandeau s'affiche tout le temps, même sur smartphone. Pourquoi ?

Serait-ce parce que je n'ai pas Bootstrap ? Faut que j'installe et configure quelque chose ? Je viens de chercher un peu sur le Web... Ça m'a l'air d'être encore tout un bazar... Y aurait pas moyen de faire sans ? (s'il est toutefois avéré que je ne l'ai pas)

Hervé

[Fred2FR3]

Salutations,
Je pense que vous trouverez votre bonheur sur cette piste : https://www.w3schools.com/cssref/atrule_media.php

Les CSS @media sont déjà implanté nativement (j'peux me trompé, cela fait un moment que je ne suis pas allé farfouiller par la)

[RobertG]

D'autres pistes dans ces discussions

https://forum.joomla.fr/forum/joomla-4-x-aa/questions-g%C3%A9n%C3%A9rales-aa/2052062-bootstrap-et-masquage-de-modules

et

https://forum.joomla.fr/forum/joomla-5-x/gestion-des-templates-design-css-et-bootstrap-ab/2064705-masquer-un-module-sur-un-smartphone

[Helloo]

... avec classe du module = d-none d-lg-block

Bonjour,

Oui, cette règle fonctionne très bien.

Il faudrait encore choisir "html5" sous les paramètres avancés, style du module.

[hervelam]

Bonsoir,
Ouiiiii ! En rajoutant "html5" dans style du module, ça marche ! Merci beaucoup !
Il me reste juste un point à régler, comment rendre le module un peu plus 'responsive', parce que là c'est pas top :

Si quelqu'un sait me dire comment faire, parce qu'en CSS je tâtonne énormément.....
(J'ai essayé différentes valeurs de .acym_module { width: } dans mon template, mais rien qui donne le résultat escompté.)
Hervé

[daneel]

Bonsoir,
Il me reste juste un point à régler, comment rendre le module un peu plus 'responsive', parce que là c'est pas top
Hervé

Dans l'édition du module acy, essaye en mode vertical ou sans tableau :
en "vertical", tu as le champ email et le bouton de soumission l'un en dessous de l'autre mais toujours dans un tableau,
Ideal quand la zone est restreinte en largeur et que l'on ne connait pas la css.

en mode d'affichage "sans tableau", donc il n'y a pas d'encadrement et tu dois définir ta propre mise en forme avec les classes css existantes.
ce qui permet à la fois d'ajuster avec précision et d'ajouter eventuellement des effets au survol ou au clic sans devoir faire une surcharge.

[hervelam]

Nickel !
Merci beaucoup.
Je ferme le sujet
Hervé