page cms et ergonomie mobile (résolu)

Aurélia222 · July 24, 2019

Bonjour à tous,

Google n'aime pas ma nouvelle page cms https://shopnature.fr/content/14-utilisation-des-huiles-vegetales

Il me reproche un contenu plus large que l'écran , texte illisible, et éléments cliquables trop rapprochés.

Comment puis -je faire pour que mon tableau devienne responsive?

Je peux agrandir la police et espacer les liens mais cela agrandira davantage le tableau.

Si quelqu'un a une idée .

Merci d'avance

Aurélia

Edited July 30, 2019 by Aurélia222
résolu (see edit history)

SK3uD · July 24, 2019

Bonjour,

il faut mettre des media queries pour dire comment ton tableau doit s'afficher en fonction des tailles d'écrans.

Regarde par ici, le sujet est traité : https://forum.alsacreations.com/topic-27-77755-1-Rendre-un-tableau-html-responsive.html

Sinon, regarde sur ces résultats : https://www.google.com/search?q=tableau+responsive&rlz=1C1CHBF_frFR784FR784&oq=tableau+responsive&aqs=chrome..69i57.3884j0j7&sourceid=chrome&ie=UTF-8

Aurélia222 · July 24, 2019

Bonjour SK3uD,

merci bcp pour ton aide mais j'ai regardé et ça m'a paru trop compliqué car je ne maîtrise pas le vocabulaire , ihihihihihi!!!

Du coup j'ai retiré mon tableau et laisser uniquement le texte.

C'est sur que ça fait moins propre coté client mais au moins google sera satisfait lol

merci quand même

SK3uD · July 24, 2019

Pourrais-tu me donner l'ancien code avec le tableau ?

Aurélia222 · July 24, 2019

je l'ai malheureusement effacé, pourquoi ?

SK3uD · July 24, 2019

j'aurais modifié le code pour qu'il s'affiche correctement sur mobile.

Aurélia222 · July 24, 2019

c'est vraiment sympa de votre part

je veux bien !

je vous le remets en format tableau et vous fourni le code dès que possible.

encore merci

Aurélia222 · July 24, 2019

Voici le code source depuis la page cms :

<h1 style="text-align: left;">Utilisation, caractéristiques et huiles végétales conseillées</h1>

Voici un document pour vous aider à choisir quelles sont les huiles végétales qui vous correspondent. Ensuite vous n'avez plus qu'à cliquer sur l'huile qui correspond.
<table width="1001" cellpadding="3" style="height: 556px; width: 993px; margin-left: auto; margin-right: auto;" border="2">
<tbody>
<tr>
<td style="text-align: center;">Peau normale</td>
<td style="text-align: center;">Lisse, confortable, élastique, fine, aspect mat et grain de peau régulier</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=argan" style="text-align: center;">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia" style="text-align: center;">Macadamia</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Peau sèche</td>
<td style="text-align: center;">Grain de peau fin, manque d'éclat, parfois irritée, inconfortable, peau fine et peu élastique</td>
<td style="text-align: center;">
<a href="https://shopnature.fr/recherche?controller=search&s=Amande+douce" style="text-align: center;">Amande douce</a> / <a href="https://shopnature.fr/recherche?controller=search&s=argan" style="text-align: center;">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Avocat" style="text-align: center;">Avocat</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Baobab" style="text-align: center;">Baobab</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Bourrache" style="text-align: center;">Bourrache</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carthame" style="text-align: center;">Carthame</a> / 
<a href="https://shopnature.fr/recherche?controller=search&s=Coco" style="text-align: center;">Coco</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Germe+de+bl%C3%A9+" style="text-align: center;">Germe de blé</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia" style="text-align: center;">Macadamia</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a>
</td>
</tr>
<tr>
<td style="text-align: center;">Peau sèche et sensible</td>
<td style="text-align: center;">Peau sèche avec rougeurs, intolérances aux variations de températures, émotions ... </td>
<td style="text-align: center;">
<a href="https://shopnature.fr/recherche?controller=search&s=Amande+douce" style="text-align: center;">Amande douce</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Baobab" style="text-align: center;">Baobab</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Germe+de+bl%C3%A9+" style="text-align: center;">Germe de blé</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / 
<a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a>
</td>
</tr>
<tr>
<td style="text-align: center;">Peau mixte</td>
<td style="text-align: center;">Peau grasse sur la zone "T" et peau plus sèche sur les joues, le cou et le contour des yeux</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Peau grasse</td>
<td style="text-align: center;">Peau épaisse et élastique, grain de peau irrégulier, pores dilatés et visibles, aspect brillant et luisant, présences éventuelles d'imperfections </td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Jojoba">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Peau grasse et sensible</td>
<td style="text-align: center;">Peau épaisse et élastique, grain de peau irrégulier, pores dilatés et visible, aspect brillant et luisant , présence d'imperfections et de rougeurs et sensations de brûlures</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Jojoba">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Peau à problèmes</td>
<td style="text-align: center;">Peau grasse fréquemment sujette aux imperfections telles que comédons, acné et excès de sébum sévère</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Calophylle" style="text-align: center;">Calophylle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Pour les bébés</td>
<td style="text-align: center;">Peau relativement sensible, parfois sèche, douce et fine</td>
<td style="text-align: center;"> <a href="https://shopnature.fr/recherche?controller=search&s=Amande+douce" style="text-align: center;">Amande douce</a> / <a href="https://shopnature.fr/recherche?controller=search&s=argan" style="text-align: center;">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Peau couperosée</td>
<td style="text-align: center;">Présence de vaisseaux dilatés (rougeurs) en particulier sur les joues</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Calophylle" style="text-align: center;">Calophylle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carthame" style="text-align: center;">Carthame</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Germe+de+bl%C3%A9+" style="text-align: center;">Germe de blé</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia">Macadamia</a></td>
</tr>
<tr>
<td style="text-align: center;">Prévention de l'âge</td>
<td style="text-align: center;">Prévenir et ralentir les effets du temps sur la peau</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=argan" style="text-align: center;">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Bourrache" style="text-align: center;">Bourrache</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carthame" style="text-align: center;">Carthame</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Peau mature</td>
<td style="text-align: center;">Peau en général sèche, déshydratée, plus ou moins sensible, avec perte de souplesse, d'élasticité, teint terne et présence de rides et ridules. Peau fine et rêche au toucher </td>
<td style="text-align: center;">
<a href="https://shopnature.fr/recherche?controller=search&s=argan" style="text-align: center;">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Avocat" style="text-align: center;">Avocat</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Baobab" style="text-align: center;">Baobab</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Bourrache" style="text-align: center;">Bourrache</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carthame" style="text-align: center;">Carthame</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / 
<a href="https://shopnature.fr/recherche?controller=search&s=Macadamia" style="text-align: center;">Macadamia</a> 
</td>
</tr>
<tr>
<td style="text-align: center;">Tâches de vieillesse</td>
<td style="text-align: center;">Tâches pigmentées apparues avec le temps et l'exposition au soleil</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="text-align: center;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Ricin" style="text-align: center;">Ricin</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: center;">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Grossesse et vergetures</td>
<td style="text-align: center;">Besoin d'hydratation et d'élasticité</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=argan">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Avocat">Avocat</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Germe+de+bl%C3%A9+">Germe de blé</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia">Macadamia</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Cellulite</td>
<td style="text-align: center;">Cellulite résistante (faciliter son élimination par le massage) </td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Carthame">Carthame</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia">Macadamia</a></td>
</tr>
<tr>
<td style="text-align: center;">Bronzage</td>
<td style="text-align: center;">Prépare la peau à l'exposition solaire et facilite le bronzage </td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Avocat">Avocat</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carotte">Carotte</a></td>
</tr>
<tr>
<td style="text-align: center;">Protection UV</td>
<td style="text-align: center;">Pour préparer la peau à l'exposition solaire. Chaque huile possède un indice de protection plus ou moins élevé </td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=Beurre+de+Karit%C3%A9+">Beurre de Karité</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia">Macadamia</a></td>
</tr>
<tr>
<td style="text-align: center;">Coup de soleil</td>
<td style="text-align: center;">Peau sensibilisée, chaude, douloureuse</td>
<td style="text-align: center;">
<a href="https://shopnature.fr/recherche?controller=search&s=Avocat">Avocat</a> /<a href="https://shopnature.fr/recherche?controller=search&s=Beurre+de+Karit%C3%A9+">Beurre de Karité</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Calendula">Calendula</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Coco">Coco</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia">Macadamia</a> / 
<a href="https://shopnature.fr/recherche?controller=search&s=Millepertuis">Millepertuis</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e" style="text-align: left;">Rose musquée</a>
</td>
</tr>
<tr>
<td style="text-align: center;">Cicatrices</td>
<td style="text-align: center;">Cicatrices récentes à atténuer</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=argan">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia">Macadamia</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Rose+musqu%C3%A9e">Rose musquée</a></td>
</tr>
<tr>
<td style="text-align: center;">Cheveux</td>
<td style="text-align: center;">Cheveux secs, ternes, difficiles à coiffer</td>
<td style="text-align: center;">
<a href="https://shopnature.fr/recherche?controller=search&s=Amande+douce" style="background-color: #ffffff;">Amande </a><a href="https://shopnature.fr/recherche?controller=search&s=Amande+douce">douce</a> / <a href="https://shopnature.fr/recherche?controller=search&s=argan">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Avocat">Avocat</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Baobab">Baobab</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Bourrache">Bourrache</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carthame" style="text-align: left;">Carthame</a> / 
<a href="https://shopnature.fr/recherche?controller=search&s=Coco" style="text-align: left;">Coco</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: left;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Macadamia" style="background-color: #ffffff;">Macadamia</a> /<a href="https://shopnature.fr/recherche?controller=search&s=Nigelle" style="background-color: #ffffff;">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Ricin" style="background-color: #ffffff;">Ricin</a>
</td>
</tr>
<tr>
<td style="text-align: center;">Ongles cassants</td>
<td style="text-align: center;">Ongles cassants, striés, dédoublés, mous ... (Améliorer l'aspect général des ongles)</td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=argan">Argan</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Baobab">Baobab</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Bourrache">Bourrache</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Carthame">Carthame</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Nigelle">Nigelle</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Olive">Olive</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Ricin">Ricin</a> </td>
</tr>
<tr>
<td style="text-align: center;">Mains et pieds</td>
<td style="text-align: center;">Peau sèche ou très sèche, avec crevasses et autres callosités </td>
<td style="text-align: center;"><a href="https://shopnature.fr/recherche?controller=search&s=argan">Argan</a> /<a href="https://shopnature.fr/recherche?controller=search&s=Beurre+de+Karit%C3%A9+">Beurre de Karité</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Coco">Coco</a></td>
</tr>
<tr>
<td style="text-align: center;">Contre les poux</td>
<td style="text-align: center;">Présence de poux et lentes dans les cheveux</td>
<td style="text-align: center;">
<a href="https://shopnature.fr/recherche?controller=search&s=Amande+douce" style="text-align: center;">Amande douce</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Coco" style="text-align: center;">Coco</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Jojoba" style="text-align: center;">Jojoba</a> / <a href="https://shopnature.fr/recherche?controller=search&s=Olive" style="text-align: center;">Olive</a> (à compléter avec des
Huiles essentielles de tea tree et/ou Lavandin, 20 min de pause)


</td>
</tr>
</tbody>
</table>

encore merci

SK3uD · July 24, 2019

Bon, comme d'habitude, je prends le chemin le plus compliqué. En fait, il n'y a qu'une seul ligne à modifier pour que le tableau s'adapte à la page.

<table width="1001" cellpadding="3" style="height:556px;width:993px;margin-left:auto;margin-right:auto;" border="2">

Vous remplacez les valeurs en px par des valeurs en %. Comme ceci par exemple :

<table cellpadding="3" style="width:90%;margin-left:auto;margin-right:auto;" border="2">

J'ai volontairement enlevé le width="1001" parce que j'ai mis une taille dans la partie style="..."

Aurélia222 · July 24, 2019

super ça fonctionne

ça a rajouté une barre de défilement pour voir ce qui était à droite

encore merci pour votre aide

SK3uD · July 24, 2019

Ajoute ce code au dessus du code de ton tableau, avant <table>

<style>
    @media screen and (max-width: 640px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: auto!important;
  }
}
</style>

Je sais que !important c'est pas terrible mais on fera avec

Edited July 24, 2019 by SK3uD (see edit history)

Aurélia222 · July 24, 2019

j'ai rajouté le code mais je ne vois pas la différence.

fallait peut être mettre un autre mot à la place d'important ?

désolé j'ai pas tout compris

Aurélia222 · July 24, 2019

j'ai vérifié , je mets le code , j'enregistre mais le code disparaît à chaque fois

SK3uD · July 24, 2019

<style>
    @media screen and (max-width: 640px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: auto!important;
  }
}
</style>

Le code ci-dessus est à ajouter au-dessus de la balise <table cellpadding....>

SK3uD · July 24, 2019

ah oui ... les pages CMS.

IL faut donc ajouter ce code sur le fichier cms.css de votre thème.

@media screen and (max-width: 640px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: auto!important;
  }
}

Aurélia222 · July 24, 2019

je ne trouve pas le fichier ☹️

Aurélia222 · July 24, 2019

j'ai 2 dossiers thème , un dans admin et 1 autre plus bas

SK3uD · July 24, 2019

/themes/classic/assets/css/custom.css

Sur ce fichier ça ira.

SK3uD · July 24, 2019

Dans le fichier css, il faut enlever <style> et </style>

Aurélia222 · July 24, 2019

c'est bon ça fonctionne

ça a modifier le tableau en colonne

en tout cas merci bcp pour votre patience

SK3uD · July 24, 2019

C'est le but des forums. Je demande assez d'aide pour en donner quand j'en ai la possibilité.

Aurélia222 · July 24, 2019

En tout cas c'est vraiment sympa,

c'est Google qui va être satisfait

encore merci et très bonne soirée

page cms et ergonomie mobile (résolu)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in