Какой то битый пост(http://m.joyreactor.cc/post/4875263) ломает верстку в m.joyreactor.cc внешний вид ошибки для залогиненных пользователей отличается / dev :: реактор :: песочница

IONE

devреакторпесочница

Какой то битый пост(http://m.joyreactor.cc/post/4875263) ломает верстку в m.joyreactor.cc внешний вид ошибки для залогиненных пользователей отличается

Что сломалось
*без входа на сайт:"правая колонка" уезжает а "тело" поста растягивается.
*а если войти(залоснится):длинные слова выезжают на соседний блок

Возможная причина: наличие в посте длинных слов без пробелов

*в: http://joyreactor.cc и http://old.reactor.cc ошибка не проявляется на 18.01.2022

Картинки (зум выкручен на 50% для экономии)

без логина:
верх

Preview

низ

Preview

с логином:
верх

Preview

низ

Preview

Всё!!!(а вообще мне скучно такое писать ну вроде как то и логин меняет вид, ну и вдруг пригодится;)
=^~.-^= V

О посте

Комментарии

9

18.01.22, 01:08

+0,8

Seek_and_Destroy

18.01.2022, 01:17

ссылка

-1,7

*в посте ссылка old.reactor.cc превратилась в joyreactor.cc :/ ~_^

IONE

18.01.2022, 01:35

ссылка

0,0

для тега b надо добавить правило word-wrap: break-word;

AntiUser

19.01.2022, 11:33

ссылка

0,0

Ну или для пост_контента в целом, чтобы и под другими тегами не вылазило

AntiUser

19.01.2022, 11:36

ссылка

0,0

"добавить правило word-wrap: break-word;"

В joyreactor.cc и old.reactor.cc это кажется решено через overflow:hidden такой подход мне нравиться больше так как в упомянутом в посте случае лишний текст прячется.

И так уже решали вопрос ранее поэтому это ожидаемое поведение.

~_^

IONE

19.01.2022, 16:49

ссылка

0,0

Я попытался полностью с этим разобраться получилось частично пишу на всякий случай ~_^
*для воспроизведения ошибки ширина экрана должна быть не меньше 1200 пикселей
Тело поста: добавить в css  overflow:hidden по моему всё
SEO блок: тут сложнее
1)добавить в css width:843px /*16+811+16*/ (дополнительная зашита от выезжания seo блока)
2) (вынесено в отдельный пост)заменить текст в блоке ответ GraphQL  с title на=> description
2.5)исправить ответ description GraphQL по образцу seo блока в http://joyreactor.cc ну или сделать лучше(как не знаю) но коротко
0)(бонус)А точно ли нужен seo блок? Текст из постов не фигурирующий в "seo блоке"(если я правильно понял где он) кажется гуглится. Может попробовать его убрать временно в http://m.joyreactor.cc и посмотреть что будет?
-------------
Если все сделать в пределах поста ошибка вроде бы решается...
p.s.Этот пост тоже глючит http://m.joyreactor.cc/post/5061838

IONE

20.01.2022, 04:22

ссылка

0,0

*ссылка "вынесено в отдельный пост" http://joyreactor.cc/post/5064074

IONE

20.01.2022, 04:54

ссылка

0,0

⠀Дополнеие/исправлениe(того что я писал)
*1)добавить в css width:843px /*16+811+16*/ (дополнительная зашита от выезжания seo блока)

⠀Если добавить в css width:843px при ширение экрана меньше 1000px  проявляется другой баг с выезжанием решением может стать добавить max-width:843px
(это можно заметить прокрутив страницу вправо но это не сильно заметно и в мобильном режиме FireFox ошибка мной не замечена)

⠀НО мне не так давно доводилось сталкивается с устаревшими но работавшими устройствами не поддерживавшими max-width

IONE

21.01.2022, 01:52

ссылка

0,0

Заплатка заплатки или как(?)
*"при ширение экрана меньше 1000px" => при ширение экрана в 800px тогда колонка с постом уменьшается а "seo блок"(только при добавлении width:843px ) остается с шириной 843пикселя(px) это видно и в мобильном режиме FireFox.
^Сейчас в вашей верстке такого бага нет!!!

p.s.Я больше не собираюсь сюда добавлять комментарии так как создаю путальницу.

IONE

21.01.2022, 21:21

ссылка

0,0

Чтобы написать коммент, необходимо залогиниться