[RÉGLÉ] Comment gérer les dimensions d'un slideshow sur tous les écrans ? (pb hauteur)

[FlodAriege]

Bonjour,

J'ai sur le site quelques slideshows qui m'embêtent.
Par exemple, ici : https://www.rouchenergies.fr/chauffa...-gainable.html

Mon problème, c'est que si je règle comme je le fais la largeur sur 100% (pour les écrans mobiles c'est indispensable), je me retrouve avec une hauteur qui dépasse la hauteur physique de l'écran sur un PC (comme par exemple sur le petit portable de 15" sur lequel je vous écris), et une partie de l'image (1200x730) disparaît ainsi.

Je me doute qu'il faille gérer ça avec un media query, mais je ne sais pas trop par quel bout le prendre.
J'ai dans l'idée de limiter la dimension de l'image en fonction de la hauteur de l'écran, mais je ne sais pas comment m'y prendre (d'autant qu'entre le mode portrait d'un smartphone et un écran 16:9 sur un PC, on fait un sacré grand écart).

C'est peut-être parce que ça fait longtemps que je n'ai pas mis les doigts dans mon css, mais je suis en panne d'idée pour gérer ça...
L'un ou l'une d'entre vous pourrait-il/elle me faire l'aumône d'une idée siouplai ?? Je sèche, là...

Merci d'avance !

[pmleconte]

Bonjour Flo,

Je pense que tu dois pouvoir régler ton problème simplement en utilisant la commande CSS max-width. Cela limitera la largeur de ton slideshow sur les grands écrans.

Dans ton cas, tu peux essayer de mettre :

#vtnivo441 {
max-width: 900px;
margin-left: auto;​​​
margin-right: auto;   
}

C'est naturellement à optimiser en fonction de tes préférences. Les margin-left, margin-right sont là pour centrer ton module.

L'autre façon de régler cela peut venir de la gestion des media query. Voir par exemple https://www.alsacreations.com/articl...a-queries.html

Pascal

[pmleconte]

Je sais, ta demande était de limiter la hauteur, mais, je n'ai pas réussi à faire fonctionner le max-height, alors que ton module semble bien répondre au max-width.

[FlodAriege]

Merci, je comprends ce que tu veux faire, mais je dois mal m'y prendre, parce que j'ai beau vider et re-re-vider le cache, purger le cache de mon CDN, du navigateur, etc, rien à faire, rien ne bouge.
J'ai ajouté tel quel ton code à mon custom.css, mais je n'ai pas l'impression qu'il est lu par le navigateur, j'ai dû rater quelque chose.
Mais quoi ... Je réessaierai quand j'aurai les yeux un peu plus en face des trous peut-être ?

[pmleconte]

Bonjour Flo,

Tu utilises JCH Optimize. N'oublie pas de purger son cache aussi (cela se fait dans le plugin lui-même).

Pascal

[FlodAriege]

Bonjour Flo,

Tu utilises JCH Optimize. N'oublie pas de purger son cache aussi (cela se fait dans le plugin lui-même).

Pascal

Bonsoir Pascal,

En effet, c'était un problème de cache, puisque ton code est désormais bien pris en compte. Merciii !

A un petit détail près : malgré les margin auto, le module s'aligne à droite.

Etrange non ? Une idée pour ça ? (oui, je sais, j'abuuuuuuuuuuse )

Bonne soirée.
Flo

PS: merci aussi pour ton lien sur les media queries. Il faut que je réfléchisse un peu aux bonnes largeurs en fonction des écrans les plus courants, et ce sera sans doute une encore meilleure solution. Mais celle du max width me va très bien : inutile d'afficher un slideshow plus large dans ce cas de figure.

[pmleconte]

Bonjour Flo,

Apparemment, tu as une bizarrerie entre ton margin-left et ton margin-right au niveau de ton custom.css.



Pascal

[FlodAriege]

Bonjour Pascal,

Aaahhh, cet empilement de règles devient parfois un peu instable... Impossible pour moi de me souvenir à quel endroit j'ai bien pu mettre une règle qui empêche ce margin-right: auto;
Ceci dit, je pourrais user d'un !important;
Mais j'ai opté pour un margin-left: 0; en supprimant le margin-right
Merci pour ton œil de lynx !

J'ai décidément un problème de cache, car j'ai beau :
- vider le cache de Joomla
- vider le cache de JCHOptimize
- purger le custom.css en mémoire sur mon CDN
... impossible de voir la modification pour l'instant.
Sans doute qu'au moment où tu liras ce post, la modif aura été prise en compte.
(EDIT: y suis retournée quelques heures plus tard, la modif a en effet été prise en compte)

Merci encore pour ton aide.