Suite au post d'Alain sur un autre topic...
Donc , à te lire je suis un vieux c..., c'est ça ???

Citation :

Merci d'avoir ouvert ce sujet.
Oui, ton thème est 100% responsive si tu utilises les templates surchargées de xswatch4.
Par contre, si tu ajoutes du code non optimisé Bootstrap 4 (4.6), il y a de grande chance que les pages concernées ne soient plus tout à fait responsives et réagissent pas tout a fait comme tu l'attendrais.

Dans ton exemple, tu utilises une vilaine table pour présenter des éléments.
Les tables sont à proscrire, hormis en cas de VRAIS tableaux, sinon, il faut faire autrement.

Bon, évidemment, cela prends du temps, donc ce n'est pas forcément ta priorité car il y a un temps d'apprentissage à ne pas négliger.
Mais une fois cette technique maitrisée, tu pourras l'adapter à d'autres situation et dans des délais beaucoup plus courts.

Ta bible sera dorénavant Bootstrap 4.6 (4.6 pour s'accorder avec ton thème qui est sur une base de BT 4.6).

Pour ton besoin particulier, ta lecture peux commencer ici : Card layout
Maintenant, il y a plusieurs façon de présenter un ensemble de photos,
moi je te conseillerai card-decks, mais tu peux essayer d'autres choses.

Evidemment,
Je t'invite a faire des essais pour comprendre comment cela fonctionne.

Tu peux aussi t'inspirer des templates de xmnews, bloc xmnews_block.tpl par exemple.

Il y a d'autres méthodes également telles que flex
Tu peux en trouver un très bon exemple sur la page "XOOPS - Les Groupes", par exemple.
Vise un peu la barre du bas avec les 10 boutons. Je t'invite à éditer la source pour voir le code.
Je ne te cache pas que j'ai mis un certain temps a proposer cette barre, mais tu peux t'en servir exemple pour comprendre et avancer plus vite.

Encore une fois, ce n'est pas primordial, mais il ne faut pas négliger le design et la fonctionnalité responsive !

Bon courage.

Au fait,
Voici un tableau (un vrai tableau ) avec toutes les fonctionnalités responsives.

Et pour t'en convaincre,
regarde la page des sujets récents du forum.
Amuses-toi à réduire la largeur de la page et observe les changements en fonction de cette largeur.
Moins c'est large, plus je retire les éléments les moins utiles (masquage de certaines colonnes en fonction de la largeur, réorganisation du contenu...)

Merci à toi Alain, c'est hyper intéressant et ça semble aussi assez complexe.

je note et regarderais de plus près en faisant des essais pour comprendre le fonctionnement dès que j'aurais un poil de temps.
ça risque par contre de m'être vraiment très, très utile

Par exemple, la page http://lumieresdefrance.com/phpv2/modules/xmnews/article.php?news_id=13
ne devait pas utiliser une table pour afficher les "Luminaire équipées du module LEDFlex de type C"

Regarde ce qu'il se passe en mode smartphone.
- Tes icones sont tout petits, ils devraient se trouver sur 2 lignes par exemples, ça serait mieux.
- la tableau plus bas n'est pas responsive et on ne voit plus les valeurs à droites
- Ton image http://lumieresdefrance.com/phpv2/acontenu/produits/ledflex_type_c/shot.jpg devrait être sur toute la largeur en mode md ou moins large (md, sm, xs)
- ton image bandeau haut devrait prendre toute la largeur du cadre
- Tes 6 courbes ne devraient pas rester en 3 colonnes en mode smartphone
- ...

Voici un exemple :
Ensemble d'images présentées en multilignes selon largeur media

Tu auras remarqué que j'ai placé le bouton de lien à différentes positions dans les 4 cadres afin que tu aies une idée du rendu,
mais évidemment, il faudra le placer systématiquement au même endroit sur chaque cadre.

Ok je comprends le principe. Faudra que je prenne aussi le temps de regarder tout ça du coup.

Par contre en mode smartphone, tes cadres sortent de mon écran.

Citation : Oui, car le container utilisé n'est pas le vrai mais pour ton thème, tu verras, ça sera impeccable.

---

See the Pen Test-lumiere-de-france-btn by alain01 (@alain01) on CodePen.

Ok Alain, merci