Tableau JCE pas responsive ?

[Jp83]

bonjour, sur notre site : www.sanaryrunning.fr , sur la page d'accueil les tableaux generés à partir de JCE et contenent des images ne sont pas responsives ? Tout est Ok sur grand écran mais ça coince sur ecran tablette ou Smartphone. Comment faire pour rendre le tableau responsive ?
Merci de votre aide.
Jp83

[Jp83]

La première image est celle sur smartphone, la deuxième sur ecran PC

[schott0200]

Effectivement les tableaux ne sont pas responsive. C'est à proscrire complètement. Ce n'est pas bon pour l'accessibilité et le responsive. Il vous faut utiliser du CSS ou un composant supplémentaire pour cela.

[Jp83]

Bonjour Scott0200, quel composant faut-il utiliser ?
Merci

[Le_villageois]

¡ Hola !
Tu peux trouver ton bonheur avec une des nombreuses actions du pluging UP.

B.

[Helloo]

Bonjour Scott0200, quel composant faut-il utiliser ?
Merci

Bonjour,

Comme tu utilises Helix Ultimate tu peux simplement insérer des colonnes avec Helix Ultimate.

https://www.youtube.com/watch?v=GV4u7kAEMuY

Documentation:

https://www.joomshaper.com/documentation/helix-framework/layout-builder

[Jp83]

Bonjour Hello, je sais que l'on peut generer des colonnes dans le layout, mais cela concerne tout les articles du site me semble t-il ? comment ne faire cela que sur un article ?

[Helloo]

Bonjour Hello, je sais que l'on peut generer des colonnes dans le layout, mais cela concerne tout les articles du site me semble t-il ? comment ne faire cela que sur un article ?

... à partir de JCE ...

Bonjour,

Ou alors tout simplement avec JCE Pro

https://www.joomlacontenteditor.net/support/documentation/columns/creating-and-editing-columns

[Jp83]

Je reviens sur le sujet ... Il y a un problème avec Helix Ultimate, car j'ai testé le template Cassiopeia et les tableaux sont responsive ? voir sous site avec cassiopeia : https://les-drailles.sanaryrunning.fr/ Onglet Infos Club > Bureau.
Toujours avec helix Ultimate, au lieu créer un tableau, je suis passé en mode code et ai mis dans la page Bureau :
<!-- Texte HTM pour responsive -->
<div class="image-container">
<div id="grid2" class="image-grid"><img src="images/Images/Bureau/CathySans.jpg" alt="CathySans" class="responsive" /> <img src="images/Images/Bureau/Val%C3%A9rie.jpg?1712088403" alt="Valérie" class="responsive" /> <img src="images/Images/Bureau/Claudie.jpg?1712088403" alt="Claudie" class="responsive" /> <img src="images/Images/Bureau/Jean-Charles.jpg?1712088403" alt="JeanCharles" class="responsive" /> <img src="images/Images/Bureau/Christian.jpg?1712088403" alt="Christian" class="responsive" /></div>
</div>

Code Css :
/* format CSS pour Grille */
.image-grid {
display: grid;
grid-template-columns: repeat(5, 230px); /* 5 colonnes de 230px chacune */
gap: 20px; /* Espacement entre les images */
grid-row-gap: 20px; /* Espace vertical entre les éléments */
vertical-align: middle; /* Centre verticalement */
background-color: #f0f0f0; /* Couleur de fond */
border: 1px solid #333; /* Trait qui encadre la zone */
}

L'affichage est bon sur grand écran mais Pb sur petit écran ????

[jeejeeboy]

¡ Hola !
Tu peux trouver ton bonheur avec une des nombreuses actions du pluging UP.

B.

Je valide cette réponse, en précisant que l'action qui ma paraît la plus appropriée est flexauto, dont la page de démo - explication est ici

En cas de besoin, je peux donner plus de précisions, mais c'est bien l'avantage de UP : Facile et léger à installer, toujours proprement maintenu et mis à jour, très documenté et utilisé (avec bonheur) par de nombreux adeptes de Joomla.