[Résolu] Tableau HTML s'affiche mal à la verticale sur un smartphone

BONJOUR !

Désolé pour cette question un peu bête, mais en faisant un tableau je n'ai pas pensé à l'affichage à la verticale sur un smartphone ! Comme vous pouvez le voir, ce n'est pas très lisible à la verticale ! Sauf en demandant à l'internaute de retourner son téléphone ?
Est-ce que quelqu'un parmi vous aurais eu ce genre de problème ? Et surtout une solution sans tout recommencer !
Voici le lien : https://tocino-pizza.fr/la-carte.html

PS : Soyez indulgents je ne suis qu'un amateur, et ma cervelle de 64 ans n'a pas la vélocité de celles de la plupart des Webmaster sur ce forum (enfin je l'espère).

Merci à vous pour une future réponse.

modération : j'ai retouché au niveau de l'url du lien afin que celui ci soit cliquable et qu'on puisse accéder à l'url
Modifié par niuxe (28 Oct 2020 - 00:56)

Bonjour,

Il me semble que c'est très bien même sur téléphone (et visiblement, ça a été prévu).

Amicalement,

Merci pour cette réponse très rapide !

Mon entourage me dit que l'affichage du prix est un peu difficile à comprendre, Je laisserais bien comme ça si la majorité me dit que ça passe tel quel ! (Les gens sont difficile parfois !)
Surtout que le site est gratuit ! (Fait pour mon beau fils qui est pizzaïolo et le site lui plait comme il est).

Encore merci !

Bonjour,

Vu la place qu'il y a en largeur sur un téléphone, c'est forcément un peu compliqué de faire un tableau de 2 colonnes. La présentation en une seule colonne avec le prix en dessous me semble assez claire. Après, bon, on peut toujours améliorer.

Peut-être qu'il ne faudrait qu'un seul trait horizontal entre chaque description de plat et le prix du plat, et laisser 2 traits quand on passe à la description du plat suivant.

Amicalement,

Salut,

Je suis du même avis que parsimonhi. En 1 colonne ca passe très bien mais effectivement j'aurais même enlevé les séparations entre la description et le prix. La en milieu de page on est en droit de se demander si le prix est avant ou apres la description, il n'y a pas d'aide visuelle qui uni les descriptions aux prix (Loi de Gestalt il me semble).

Bonne soirée !

Salut Laurent !
C'est exactement ça ! En milieu de page c'est limite illisible et je ne trouve pas de solution simple et esthétique. Enlever une bordure en css seulement pour les portables, pas sur que j'arrive à faire ça facilement !?
Je verrais ça demain, la nuit porte conseil !
Merci à vous deux... Bonne soirée / nuit !

BONJOUR !

Merci Laurent pour cette suggestion, Je fait quelques essais dès que j'ai un moment.
Je pense que le sujet est résolu !?

Merci à tous ! A bientôt pour une prochaine question.

PS : Par contre Yordi, je n'ai pas compris le lien avec la loi de Gestalt !?

L'une des lois, est la loi de proximité.
L'idée est très simple :
- si les éléments ont une même distance entre eux, c'est une suite classique.
-si tu donnes plus et moins de distances entre tes éléments, ça devient alors des groupes d'éléments.

Pour transposer ça avec l'exemple de la pizza et du prix.

…
prix
pizza
prix
pizza
prix
pizza
prix
pizza
prix
…

On peut se demander quel prix appartient à quel pizza, alors qu'avec un simple espace, on groupe pizza/prix et on a plus de question sur l'appartenance/association.

…
prix

pizza
prix

pizza
prix

pizza
prix

pizza
prix
…

Quelque chose de banal quand on le voit, mais pas toujours appliqué
Modifié par Yordi (28 Oct 2020 - 14:35)