[RÉGLÉ] Version site classique versus version site mobile

[EmilieDenayer]

Bonjour,

Je travaille avec le module J2Store pour le webshop.
Sur le site classique les produits se présentent bien, mais sur le site mobile, les titres et textes ne s'adaptent pas à l'écran.

Par exemple cette page sur le site classique: http://www.la-haut-pro.ch/produits-e...es-accessoires

Et voir en annexe la version du site mobile.

Comment pouvons nous redéfinir le site mobile, par exemple mettre sur la version mobile 1 article par colonne?

Merci beaucoup d'avance pour le retour!

.

[jisse03]

Re : Version site classique versus version site mobile

Bonjour,

Le style par défaut choisi pour le rendu dans la config J2Store est elle Default ou Bootstrap ?

Default utilise des tableaux, et donne ce type de rendu sur un mobile.

[EmilieDenayer]

Re : Version site classique versus version site mobile

Bonjour,

Merci pour votre réponse.

Voir en annexe. Si ca c'est bien le style, c'est sur Boostrap oui..

Merci d'avance!

[jisse03]

Re : Version site classique versus version site mobile

En style bootstrap, les produits devraient s'empiler et non avoir le look que tu as (un tableau classique). Donc il faudrait un accès au site pour voir ce qui cloche.

[EmilieDenayer]

Re : Version site classique versus version site mobile

Bonjour jisse03,

Merci pour votre réponse.
Bon j'ai créé un autre problème. Je voulais créer une session visite pour vous, mais en essayant de me connecter, Joomla m'a refusé la connexion, et me refuse tout accès maintenant, même avec mon login habituel. Le message suivant s'affiche: "You are a spammer, hacker or an otherwise bad person." et je ne peux plus accéder l'administration...
Une idee comment je peux résoudre ce problème?

Merci d'avance pour votre retour et bonne journée,
Emilie

[jisse03]

Re : Version site classique versus version site mobile

Hum blocage AdminTools https://www.akeebabackup.com/support...ad-person.html

[EmilieDenayer]

Re : Version site classique versus version site mobile

Merci, ca fonctionne à nouveau!
Cette session invité ne fonctionne pas non plus. Je dois faire quelque chose de faux.
Tant pis. Merci d'avoir essayé de m'aider! Je continu mes recherches pour trouver une solution.
Bonne journée!

[christophe31]

Re : Version site classique versus version site mobile

Admin tool empèche la création, ou la modification des utilisateurs...

[PhilJ]

Re : Version site classique versus version site mobile

Bonjour,

Sur le site classique les produits se présentent bien, mais sur le site mobile, les titres et textes ne s'adaptent pas à l'écran. [...] Comment pouvons nous redéfinir le site mobile, par exemple mettre sur la version mobile 1 article par colonne?

Vous pourriez essayer d'ajouter la directive CSS suivante — dans la feuille de style du template (= /templates/la-haut-pro/css/template.css), ou, mieux, dans une surcharge (= dans un nouveau fichier comme /templates/la-haut-pro/css/custom.css), de façon à ne pas altérer le template.css :

@media screen and (max-width: 767px) {

.row-fluid .span3 {

width: 100%;

}

}

Ou probablement mieux (mais le rendu est à vérifier sur d'autres pages que celle que vous donnez en exemple), afin que chaque produit / colonne occupe vraiment la totalité de la largeur disponible sur smartphone :

@media screen and (max-width: 767px) {

.row-fluid .span3,
.row-fluid .span9 {

width: 100%;

}

}


Cordialement,

[EmilieDenayer]

Re : Version site classique versus version site mobile

Bonjour PhilJ,
Un grand merci pour votre réponse et aide. J'ai fait comme indiqué, est ca fonctionne!
Mais uniquement pour les pages où il y avait 4 colonnes. Je suppose qu'il y a un autre code pour les pages à 2 et 3 colonnes? Si c'est le cas, pourriez-vous ne donner ce code?
Un grand merci!

[PhilJ]

Re : Version site classique versus version site mobile

[...] J'ai fait comme indiqué, est ca fonctionne! Mais uniquement pour les pages où il y avait 4 colonnes. Je suppose qu'il y a un autre code pour les pages à 2 et 3 colonnes? Si c'est le cas, pourriez-vous ne donner ce code?

Oui. Le principe est exactement le même : sur smartphone (largeur < 768 px), on force à 100 % la largeur des spanx, où x= 2, 3, 4, 6...

Pour les affichages en 3 colonnes, sachant que le total doit toujours être 12, le 'x' vaut 12 ÷ 3 = 4.

Donc (en clair ), lorsqu'il y a 3 colonnes, chacune d'elle se trouve dans un container span4.

=> Pour que ces containers span4 occupent toute la largeur (= 100 %) sur smartphone, il suffit donc d'avoir ceci dans les CSS :

@media screen and (max-width: 767px) {

.row-fluid .span4 {

width: 100%;

}

}


Le code qui devrait convenir pour tout arranger devrait donc être finalement :

@media screen and (max-width: 767px) {

.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span9 {

width: 100%;

}

}

NB : je ne vois pas de souci d'affichage sur mobile pour les pages n'affichant que 2 colonnes, donc logées dans un span6 (si vous voyez un problème de votre côté, sur quelle page ?). Cependant, si nécessaire, vous aurez deviné qu'il vous suffit d'ajouter .row-fluid .span6 à la liste des propriétés devant occuper 100 % de la largeur de l'écran sur smartphone.



Cordialement,

[EmilieDenayer]

Re : Version site classique versus version site mobile

Un grand merci pour cette explication très claire
C'est parfait ainsi! J'ai aussi ajouté le .span6 car il y a parfois plus de texte.
Encore merci!

[PhilJ]

Re : Version site classique versus version site mobile

Bonjour,

C'est parfait ainsi! J'ai aussi ajouté le .span6 car il y a parfois plus de texte

Dans ce cas, je vous recommande de passer ce fil de discussion en 'RÉGLÉ' de façon à aider les autres utilisateurs du forum.


Bonne continuation,



PhilJ