Метки у значений на странице юнита при крупном тексте — без прокрутки вбокLabels next to values on a unit page with large text — no sideways scrolling
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор на телефоне, у которого в браузере текст увеличен вдвое, читает на странице юнита статус проекта и метку «в объявлении противоречие», не прокручивая страницу вбок.An investor on a phone whose browser shows text at double size reads the project status and the «listing contradicts itself» label on a unit page without scrolling the page sideways.
ЗадачаProblem
Метки рядом со значением факта (вне цены) не переносились на вторую строку. При тексте 200 % на русской странице у двух юнитов метка «в объявлении противоречие» у строки «Статус проекта» выходила за край экрана: страница становилась шире экрана на 59 px на 320 px, на 39 px на 340 px, на 19 px на 360 px и на 4 px на 375 px — с мышью и на сенсорном экране. На английских страницах, с 414 px и на остальных страницах сайта прокрутки вбок при тексте 200 % не было.Labels next to a fact value (outside the price) did not wrap to a second line. With text at 200 % on the Russian page of two units the «в объявлении противоречие» (listing contradicts itself) label at the «Project status» row went past the edge of the screen: the page became 59 px wider than the screen at 320 px, 39 px at 340 px, 19 px at 360 px and 4 px at 375 px — with a mouse and on a touch screen. On English pages, from 414 px and on the other pages of the site there was no sideways scrolling with text at 200 %.
Как решилиHow it was solved
- Метка, которая не помещается в строку, переносится на вторую. При тексте 200 % (320, 340, 360, 375 и 414 px, русский и английский, с мышью и на сенсорном экране) ни одна страница сайта не шире экрана.A label that does not fit on its line wraps to a second line. With text at 200 % (320, 340, 360, 375 and 414 px, Russian and English, with a mouse and on a touch screen) no page of the site is wider than the screen.
- При тексте 200 % на 320 px «в объявлении противоречие» у строки «Статус проекта» и «заявление продавца» в блоке «В том же объявлении» — в две строки, текст статуса — в ширину экрана; строка «Статус проекта» длиннее (на снимках 515 → 833 px). При обычном размере текста ничего не изменилось: ширина и высота всех страниц те же.With text at 200 % at 320 px «в объявлении противоречие» at the «Project status» row and «заявление продавца» (seller's claim) in the «В том же объявлении» (in the same listing) block take two lines, the status text is as wide as the screen; the «Project status» row is longer (515 → 833 px on the pictures). At normal text size nothing changed: the width and height of every page are the same.
До и послеBefore and after
