Retraits mobiles pour les listes à puces

Existe-t-il un moyen de supprimer le padding de la marge droite sur le contenu indenté pour un appareil mobile ?

Sur un écran étroit, les retraits miroirs réduisent l’espace horizontal de l’écran à quelques caractères seulement. Le retour à la ligne du texte devient fou !

Je ne suis pas un expert en CSS à la télévision et je n’ai pas séjourné à un Holiday Inn hier soir.

Mais, ne pourriez-vous pas essayer de modifier le padding dans le CSS mobile pour la balise ul ou li ? Peut-être réduire le padding-left en %, en vw, ou simplement avec moins de pixels ?

Il est probable que quelqu’un ici puisse répondre à cela dans son sommeil. Cela pourrait être bénéfique pour tout le monde, et vous êtes simplement le premier à l’avoir remarqué.

Ou peut-être pas :thinking:

Par défaut :

.cooked ul {
    margin: 0;
    padding-left: 40px;
}

Modifiez la valeur de padding-left pour réduire le retrait dans le CSS Mobile. Après l’image ci-dessous :

.cooked ul {
    margin: 0;
    padding-left: 15px;
}

Merci pour cette suggestion. Réduire les étapes d’index de 4 à 2 aidera un peu. Mais je suis plus préoccupé par le padding miroir ajouté du côté droit ! Il serait préférable d’éliminer complètement ce padding pour une version mobile.

Peux-tu lier vers une page où tu rencontres ce problème ou copier le message ici ? Il est difficile de savoir ce qui se passe à partir de cette capture d’écran. Dans mon exemple, il n’y a pas d’indentation de la marge droite.


Voici ce message si tu veux voir à quoi il ressemble pour toi sur mobile.

  • Élément de liste plus long qu’un ou deux mots
    • Élément de liste plus long qu’un ou deux mots
      • Élément de liste plus long qu’un ou deux mots
        • Élément de liste plus long qu’un ou deux mots
          • Élément de liste plus long qu’un ou deux mots
            • Élément de liste plus long qu’un ou deux mots

Merci ! Il s’agit d’un site Discourse assez récent. Nous expérimentons dans l’espoir de supprimer nos listes de diffusion pour le projet de généalogie open source « Gramps ». Nous sommes donc encore en phase d’apprentissage.

La capture d’écran provient de l’application Android version 4. Le même problème se reproduit sur Chrome.

Voici un lien vers le message :
https://gramps.discourse.group/t/genealogical-numbering-systems/230/5

Essayez de supprimer le padding-right dans cette classe

.cooked ul[dir="ltr"] {
    padding-right: 40px;
    padding-left: 40px;
}

Vous pouvez également réduire le padding-left

.cooked ul[dir="ltr"] {
    //padding-right: 40px;
    padding-left: 15px;
}

Notre webmaster a apporté l’ajustement. C’est BEAUCOUP mieux maintenant.

Merci !

Votre webmaster n’a donc pas fait un très bon travail, car il semble qu’il y ait toujours un grand espace vide à droite. Il a réduit le padding gauche, mais a conservé le padding droit tel quel.


La solution de @smrtey est la bonne : vous devriez supprimer complètement le padding droit.
Je suppose que ce padding droit a été défini pour assurer un espacement correct pour les langues s’écrivant de droite à gauche, mais il n’a aucune raison d’être présent pour une langue s’écrivant de gauche à droite.

Merci !

Nous avons fait quelques expériences et avons fini par apprécier d’avoir une indentation miroir de 15 px à gauche et à droite.

Lorsque nous avons essayé de commenter entièrement la marge droite, cela n’a rien changé ! (Probablement un problème de valeur en cascade.)

Voici un lien vers notre discussion locale avec des captures d’écran de différentes tentatives.

Étrange.
Avez-vous essayé :

.cooked ul[dir="ltr"] {
    padding-right: 0;
    padding-left: 15px;
}

:white_question_mark:

Si cela ne fonctionne pas et que cette règle est écrasée par d’autres, vous pouvez essayer d’utiliser un sélecteur plus précis :

.topic-post .cooked ul[dir="ltr"] {
    padding-right: 0;
    padding-left: 15px;
}

Non, nous n’avons pas essayé une valeur explicite de zéro. J’ai toujours soutenu qu’une valeur zéro était trop souvent traitée comme un cas spécial dans le passage des paramètres. Par conséquent, elle a tendance à être un mauvais choix pour les diagnostics expérimentaux.

Nous avons donc opté pour 15 px… et n’avons ressenti aucune pression supplémentaire pour expérimenter. Cette valeur répondait à nos exigences.

Mais, oui, c’était étrange que le fait de commenter la ligne ne résolve pas ce problème. Et merci !

Cela aurait fonctionné si vous aviez commenté une règle padding-right: 40px; déjà existante, mais écrire simplement //padding-right: 40px; en tant que nouvelle règle n’a absolument aucun effet.

La bonne méthode ici pour annuler le padding-right: 40px; existant est bien de remplacer cette valeur précédente par une nouvelle règle en écrivant explicitement padding-right: 0;. :+1:t6: