Mobile Einrückungen für Aufzählungslisten

Gibt es eine Möglichkeit, den rechten Randabstand bei eingerücktem Inhalt auf mobilen Geräten zu entfernen?

Auf einem schmalen Bildschirm schränken die gespiegelten Einzüge den horizontalen Bildschirmraum auf nur wenige Zeichen ein. Der Textumbruch gerät völlig durcheinander!

Ich spiele keinen CSS-Experten im Fernsehen und war letzte Nacht auch nicht in einem Holiday Inn.

Aber könntest du nicht versuchen, den Padding-Wert im mobilen CSS für das ul oder li zu ändern? Vielleicht den padding-left auf einen Prozentwert, vw oder einfach weniger Pixel reduzieren?

Wahrscheinlich könnte hier jemand das im Schlaf beantworten. Das wäre für alle gut, und du bist einfach der Erste, der es bemerkt hat.

Oder auch nicht :thinking:

Standardmäßig gilt:

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

Ändern Sie den Wert für padding-left, um die Einrückung im mobilen CSS zu verringern. Nach dem Bild unten gilt:

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

Danke für diesen Vorschlag. Die Reduzierung der Index-Schritte von 4 auf 2 wird schon etwas helfen. Aber ich bin eher besorgt über den gespiegelten Padding, der auf der rechten Seite hinzugefügt wird! Am besten wäre es, dieses Padding für Mobilgeräte vollständig zu entfernen.

Können Sie auf eine Seite verlinken, auf der das Problem auftritt, oder den Beitrag hierher kopieren? Anhand des Screenshots ist schwer zu erkennen, was los ist. In meinem Beispiel gibt es keinen rechten Einzug.


Hier ist der Beitrag, falls Sie sehen möchten, wie er auf Ihrem Mobilgerät aussieht.

  • Listenelement, das länger ist als ein oder zwei Wörter
    • Listenelement, das länger ist als ein oder zwei Wörter
      • Listenelement, das länger ist als ein oder zwei Wörter
        • Listenelement, das länger ist als ein oder zwei Wörter
          • Listenelement, das länger ist als ein oder zwei Wörter
            • Listenelement, das länger ist als ein oder zwei Wörter

Danke! Dies ist eine recht neue Discourse-Seite. Wir experimentieren in der Hoffnung, unsere Mail-Listen für das Open-Source-Projekt ‘Gramps’ zur Genealogie abzuschaffen. Wir befinden uns also noch am steilen Teil der Lernkurve.

Der Bildschirmabzug stammt von der Android-App in Version 4. Das gleiche Problem tritt auch in Chrome auf.

Hier ist ein Link zum Beitrag:
https://gramps.discourse.group/t/genealogical-numbering-systems/230/5

Versuchen Sie, den padding-right in dieser Klasse zu entfernen:

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

Sie können auch den padding-left verringern:

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

Unser Webmaster hat die Anpassung vorgenommen. Es ist jetzt VIEL besser.

Vielen Dank!

Ihr Webmaster hat es dann wohl nicht besonders gut gemacht, da anscheinend immer noch ein riesiger leerer Raum auf der rechten Seite zu sehen ist.
Er hat den linken Abstand verringert, den rechten Abstand aber unverändert gelassen.


@smrteys Lösung ist die richtige: Sie sollten den rechten Abstand vollständig entfernen.
Ich vermute, dieser rechte Abstand wurde eingestellt, um den korrekten Abstand für rechts-nach-links-Sprachen zu gewährleisten, aber für eine links-nach-rechts-Sprache hat er hier keinen Sinn.

Danke!

Wir haben ein bisschen experimentiert und uns schließlich dafür entschieden, einen gespiegelten linken und rechten Einzug von 15 px zu verwenden.

Als wir den rechten Rand komplett auskommentierten, änderte sich nichts! (Wahrscheinlich ein Problem mit kaskadierenden Werten.)

Hier ist ein Link zu unserer lokalen Diskussion mit Screenshots aus verschiedenen Versuchen.

Seltsam.
Hast du Folgendes versucht:

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

:white_question_mark:

Wenn es nicht funktioniert und andere Regeln dies überschreiben, kannst du einen präziseren Selektor verwenden:

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

Nein, wir haben keinen expliziten Nullwert ausprobiert. Ich habe stets vertreten, dass eine Null bei der Parameterübergabe zu oft als Sonderfall behandelt wird. Daher ist sie für experimentelle Diagnosen oft eine schlechte Wahl.

Also haben wir uns für 15px entschieden… und fühlten keinen weiteren Druck, weitere Experimente durchzuführen. Dieser Wert erfüllte unsere Anforderungen.

Aber ja, es war seltsam, dass das Kommentieren das Problem nicht behoben hat. Und vielen Dank!

Es hätte funktioniert, wenn du ein bereits vorhandenes padding-right: 40px; kommentiert hättest, aber das bloße Schreiben von //padding-right: 40px; als neue Regel hat absolut keine Wirkung.

Der richtige Weg, das bestehende padding-right: 40px; hier zu deaktivieren, besteht tatsächlich darin, diesen vorherigen Wert durch eine neue Regel mit der expliziten Angabe padding-right: 0; zu überschreiben. :+1:t6: