Перенос текста сломан в мобильном виде из-за компонента темы Easy Footer

Поддержка
1

На https://community.drownedinsound.com/ за последние несколько часов на сайте произошли изменения: перенос строк больше не применяется, а также наблюдается другое странное поведение интерфейса. Это происходит только в мобильном режиме.

image
image1920×779 190 KB

Там есть несколько тем, где пользователи жалуются на то же самое поведение, так что это не проблема, специфичная для моего аккаунта:
https://community.drownedinsound.com/t/thread-titles-arent-wrapping/66342

Судя по времени публикации постов, это началось примерно 12 часов назад, то есть в 20:30 (CEST) 08-05-2022.

2

Здравствуйте,

Похоже, это вызвано вот этим: Easy Responsive Footer
Компонент содержит строку CSS #main-outlet, которая вызывает эту проблему.

Есть ещё один отчёт об этой проблеме в теме компонента темы:

Вы можете использовать это быстрое исправление, пока проблема не будет устранена.
Перейдите в /admin/customize/themes и создайте новый компонент.
Нажмите на секцию CSS для мобильных устройств и добавьте следующее:

#main-outlet {
  width: 100%;
  max-width: 100%;
}

Screenshot 2022-05-09 at 10.49.53
Screenshot 2022-05-09 at 10.49.53323×208 12.4 KB

3

Я обновил пост выше. Забыл переопределить max-width. @ma0sm, @AquaL1te

4

Привет! Спасибо за это. Однако, когда я пытаюсь применить быстрое исправление в настройках администратора, я получаю следующее сообщение:

Редактирование удалённых тем в Discourse отключено. Пожалуйста, свяжитесь с нами, если вам нужна помощь в переходе с кастомизированных удалённых тем на локальную тему.

Похоже, в этом случае нам понадобится ваша помощь :slight_smile:

5

Добавьте новый компонент темы с дополнительным фрагментом кода. :+1:

  • Перейдите в /admin/customize/themes
  • Нажмите Установить, а затем Создать новый
  • Задайте имя и выберите «Компонент».
  • Создать
  • Добавьте его в свою тему
  • Нажмите кнопку Редактировать CSS/HTML и вставьте код в поле CSS на вкладке Мобильные устройства
  • И сохраните
6

Спасибо! Кажется, это сработало! :grin:

7

Выглядит отлично! Большое спасибо за вашу быструю помощь!

7295b164b20a377a265b16e81812bb894b2c89b5
7295b164b20a377a265b16e81812bb894b2c89b53326×974 356 KB

Но, кажется, отступы стали больше, чем раньше. Это что-то, что будет исправлено после внедрения полного исправления?

8

Думаю, это связано с тем, что реклама не подходит под ширину мобильного устройства. Попробуйте отключить Easy responsive footer и другой компонент, который вы создали с помощью сниппета, который я опубликовал ранее. Просто для проверки: проблема с отступами возникает из-за рекламы или из-за чего-то другого?

Кажется, я нашел возможное решение. :thinking:

Можете ли вы добавить это в тот же новый компонент, который вы создали ранее, чтобы проверить, как это работает? Просто вставьте это ниже предыдущего сниппета, @dis_whiterussian.

.wrap {
  margin-left: unset;
  margin-right: unset;
}
9

Спасибо, кажется, всё решилось!

12

Я добавил исправление для easy footer