Отступы для маркированных списков на мобильных устройствах

Поддержка
1

Есть ли способ убрать отступ справа для контента с отступом на мобильных устройствах?

На узком экране зеркальные отступы сжимают горизонтальное пространство экрана до нескольких символов. Перенос текста начинает вести себя непредсказуемо!

Screenshot_20200213-135029
Screenshot_20200213-1350291080×1920 165 KB

2

Я не играю эксперта по CSS на телевидении и не останавливался вчера в отеле Holiday Inn.

Но не могли бы вы попробовать изменить отступ в мобильном CSS для ul или li? Возможно, уменьшить padding-left до процентов, единиц vw или просто меньшего количества пикселей?

Скорее всего, кто-то здесь ответит на это во сне. Это может быть полезно для всех в целом, а вы просто первым заметили проблему.

Или нет :thinking:

3

По умолчанию используется

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

Измените значение padding-left, чтобы уменьшить отступ в мобильном CSS. После изображения ниже:

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

image
image350×765 19 KB

4

Спасибо за это предложение. Уменьшение шагов индекса с 4 до 2 немного поможет. Но меня больше беспокоит добавление зеркального отступа с правой стороны! Лучше всего полностью убрать этот отступ для мобильных устройств.

5

Можете дать ссылку на страницу, где вы сталкиваетесь с этой проблемой, или скопировать пост сюда? По скриншоту трудно понять, что происходит. В моём примере нет отступа справа.

image
image378×518 15.4 KB

image
image379×545 13 KB

Вот этот пост, если вы хотите посмотреть, как он выглядит у вас на мобильном устройстве:

  • Элемент списка, который длиннее одного-двух слов
    • Элемент списка, который длиннее одного-двух слов
      • Элемент списка, который длиннее одного-двух слов
        • Элемент списка, который длиннее одного-двух слов
          • Элемент списка, который длиннее одного-двух слов
            • Элемент списка, который длиннее одного-двух слов
6

Спасибо! Это довольно новый сайт на Discourse. Мы проводим эксперименты в надежде отказаться от наших списков рассылки для проекта открытого исходного кода «Gramps» по генеалогии. Поэтому мы находимся на крутом участке кривой обучения.

Скриншот сделан из Android-приложения версии 4. Та же проблема воспроизводится в Chrome.

Вот ссылка на сообщение:
https://gramps.discourse.group/t/genealogical-numbering-systems/230/5

7

Попробуйте убрать отступ справа в этом классе

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

image
image387×662 23.5 KB

Также можно уменьшить отступ слева

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

image
image388×564 20.4 KB

8

Наш веб-мастер внес правку. Теперь это намного лучше.

Спасибо!

Screenshot_20200216-101256
Screenshot_20200216-1012561080×1920 222 KB

10

Ваш веб-мастер тогда не справился с задачей, так как, похоже, справа всё ещё остаётся огромное пустое пространство. Он уменьшил отступ слева, но оставил отступ справа без изменений.

image
image324×561 22.2 KB
image
image375×146 3.22 KB
Решение от @smrtey правильное — вам следует полностью убрать отступ справа. Полагаю, этот отступ был установлен для обеспечения правильного оформления языков с направлением письма справа налево, но для языков с направлением слева направо он здесь не нужен.

11

Спасибо!

Мы провели несколько экспериментов и в итоге решили использовать зеркальные отступы слева и справа по 15 пикселей.

Когда мы попробовали полностью закомментировать правый отступ, ничего не изменилось! (Скорее всего, это проблема каскадности значений.)

Вот ссылка на наше обсуждение в локальном сообществе со скриншотами разных попыток.

12

Странно.
Вы пробовали:

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

:white_question_mark:

Если это не сработает и правило будет переопределено другими стилями, попробуйте использовать более точный селектор:

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

Нет, мы не пробовали явное нулевое значение. Я всегда утверждал, что ноль слишком часто обрабатывается как особый случай при передаче параметров. Поэтому он, как правило, является плохим выбором для экспериментальной диагностики.

Поэтому мы остановились на 15 пикселях… и не чувствовали дальнейшей необходимости экспериментировать. Это значение удовлетворило нашим требованиям.

Но да, было странно, что закомментирование кода не решило проблему. И спасибо!

14

Это сработало бы, если бы вы закомментировали уже существующее правило padding-right: 40px;, но простое написание //padding-right: 40px; как нового правила абсолютно никак не влияет на результат.

Правильный способ отменить существующее padding-right: 40px; здесь — действительно переопределить предыдущее значение новым правилом, явно указав padding-right: 0;. :+1:t6: