проверить страницы на адаптивность

[fey]

Problem description

Нет понимания, ок ли наши страницы или есть сломанные

Proposed solution

сабж

[JaroslavRusanov]

Привет! Достаточно ли проверить на эмуляторе DevTools или надо на разном оборудовании?

[fey]

@JaroslavRusanov Добрый день.

Девтулс подойдут

[JaroslavRusanov]

Готов поработать на новогодних выходных, но я новичок, учусь на frontend на Хекслете (второй проект). Можно задавать вопросы здесь?

[fey]

Хм) Тогда лучше задавать вопрсоы в нашем телеграме https://t.me/hexletcommunity/12
Я буду скорее всего отдыхать, но может быть смогу ответить там.

[JaroslavRusanov]

Добрый день! Здесь есть ещё одно issue на адаптивность (issue#1448) - это одно и тоже задание?
Также задавал вопрос в волонтерах на ТГ по отступам. Теперь лучше здесь задавать вопросы?

[fey]

Добрый день. 1448 скорее про фикс. А тут задача для тестировщиков.
Можете задавать здесь - тогда контекст задачи будет в одном месте

[JaroslavRusanov]

Правильно ли я понимаю, здесь достаточно указать проблему (скинуть скан, или адрес) с описанием где что ломается?

[fey]

да, скриншот, адрес страницы. Главное чтобы понять, что сломалось, чтобы разработчики могли это починить.

[JaroslavRusanov]

ОК, ловите первую:
адрес (надо залогиниться) при размере меньше 576px отсутствуют горизонтальные отступы.
Если у селектора .row убрать margin-left, margin-right отступы возвращаются. При этом изменении на остальных разрешениях ничего не ломается на этой странице

[JaroslavRusanov]

адрес - Оглавление, заголовки (тэги h2, h3) отсутствуют отступы слева на разрешении меньше 576.

[JaroslavRusanov]

адрес и адрес разрешение меньше 576 также отсутствуют отступы. Если в селекторе .row и в заголовках отключить margin-left, margin-right отступы появляются.


Так в принципе на всех страницах упражнений и списках решений на телефонном разрешении. Я думаю, что по отступам на малом разрешении достаточно сканов, согласны?

[fey]

А можете подсказать на каких устройствах расширение 576 и меньше? Если таких устройств мало, может просто забить на них?)

[JaroslavRusanov]

Это практически каждый телефон. У меня это Pocophone 5m. Если посмотреть на дэвтулсе - это все Iphone от SE до 14го.

[JaroslavRusanov]

Я поясню, что я имел ввиду под разрешением 576px. Это горизонтальное разрешение (по сути width), телефоны редко бывают шире в горизонтали. Не знаю сколько людей будут учиться и решать задачи на телефоне. Теоретически можно повернуть телефон...

[JaroslavRusanov]

На примере страницы осилятора (надо зайти авторизованным) в main есть div с классом .container в нем заданы margin-left, margin-right на auto. В них вложены еще div`ы с классом .row в них заданы margin-left, margin-right: calc(var(--bs-gutter-x)*-.5). В девтулсе последние марджи в .row отключаю и появляются нормальные отступы на разрешении (width) менее 576px.

[JaroslavRusanov]

@canekg и всем.
Тут ещё форма сломалась, как мне кажется. (скан старый, ещё без отступов, но сейчас также)

Также на разрешении 768px

На английской версии такого нет, и далее список решений не выходит за пределы экрана.