[RÉGLÉ] Probleme de hauteur diaporama slideshowCK sur mobile

[Alain_42]

Bonjour,
Template protostarplus.
Pour réaliser une entête de site animée, j'ai mis un module personnalisé contenant une image "entête" en pos 0. (1000x170px)
J'ai mis aussi en pos 0 un diaporama SlideshowCK qui va se superposer dans la partie inférieure droite de l'entête, pour faire défiler 3 images.
Paramètres du mod_slideshowCK: largeur 440px, hauteur 103px.
Suffixe de classe: diapo_entete
Pour faire chevaucher sur l'image entête j'ai mis un margin-top= - 112px
le code que j'ai rajouté dans le template protostarplus/scripts personalisés et CSS:
.diapo_entete {
max-width:45%;
float:right;
margin-top: -112px;
}

Sur un écran d' ordinateur l'affichage correspond bien à ce que je recherche, par contre sur téléphone mobile Androïd, le diaporama a bien la bonne largeur, mais la hauteur n'est pas bonne.
J'ai tout essayé avec max-height. height:auto rien ne fonctionne

Merci si vous pouvez me venir en aide.
Cordialement
Alain

[nossibe]

Bonjour Alain, un petit lien vers le site pourrait aider à t'aider

[Alain_42]

Bonjour,

merci de t'intéresser à mon pb
le site: anr03.fr

Cordialement
Alain

[nossibe]

Personnellement j'aurais carrément fait disparaitre le slideshow en version mobile, personne ne parviendra à le voir et ça nécessite de charger plein d'image donc pour un forfait mobile ce n'est pas souhaitable... Qu'en dis-tu ? Veux-tu que je t'aide à le redimensionner ou à le faire disparaitre ?

[Alain_42]

Les images de l'entête concernées ne font que quelques Ko
J’aurais bien aimé y parvenir.
Mais c'est bien un peu ce que pensait le mieux est de supprimer ce diaporama sur l'affichage mobile.
il doit falloir faire je pense du CSS
media (max-width: 475px) {
.diapo_entete {
display:none;
}}

Alain

[nossibe]

display:none ne fait que cacher les éléments, ils sont quand même chargés par la page, il serait préférable de ne pas les charger du tout... Enfin si SlideshowCK n'a pas prévu ce paramétrage, c'est mieux que rien...

[Alain_42]

Merci de ton aide.
J'ai mis display:none !important;

Par contre je ne trouve pas ou passer en "résolu"

@lain

[Alain_42]

Bon j'ai trouvé pour mettre en réglé !

[ced1870]

Salut
Slideshow CK n'intègre pas l'option de désactivation sur mobile, par contre il y a des solutions comme Advanced Modules manager de Regular labs qui fait cela pour n'importe quel module il me semble
Le souci c'est que si chacun commence à faire de la détection, tu vas te retrouver avec plein de classes PHP chargées pour faire la meme chose, et parfois avec des conflits si les devs n'ont pas prévu la cohabitation ...
parfois vaut mieux un outil dédié
CEd

[nossibe]

Pas vraiment besoin de créer une classe supplémentaire, une simple condition suffit... Je pense que c'est plus léger que le chargement d'une extension supplémentaire. D'autant que le slider est typiquement l'élément que l'on supprime en version mobile donc ça permettrait de ne pas avoir à ajouter une extension juste pour cela... Mais ceci n'est qu'un point de vu

[ced1870]

quoi comme condition ? je ne parle pas de CSS ici, mais bien de détection de matériel (telephone / tablette) pour ne pas charger le module. Si tu le caches en css ça n'enlève pas le fait qu'il est chargé et utilise la bande passante

[nossibe]

Il suffit d'ajouter une ligne de JS pour détecter la taille de l'écran...

[lomart]

Salut,

C'est en natif dans Joomla!

jimport('joomla.environment.browser');
$browser = jBrowser::getInstance();
$navigateur = $browser->getBrowser(); // contient "mozilla", "safari", "chrome", "opera", etc... (tout navigateur réellement utilisé)
$mobile = $browser->isMobile(); // variable booléenne : si "true", l'utilisateur travaille avec un mobile (petit écran) 

[ced1870]

merci Lomart, je n'avais en effet pas pensé à cela !
nossibe : ok mais en JS ça n'empeche pas que le module est quand meme chargé, meme si tu le détruis ensuite

[nossibe]

Le module est chargé mais pas les images, ça fait donc un gain de ressources non négligeable...
Mais la question ne se pose même si la fonction isMobile() existe, merci pour l'info Lomart.