hexlet-sicp
hexlet-sicp copied to clipboard
Hexlet
проверить страницы на адаптивность
Problem description
Нет понимания, ок ли наши страницы или есть сломанные
Proposed solution
сабж
Привет! Достаточно ли проверить на эмуляторе DevTools или надо на разном оборудовании?
Готов поработать на новогодних выходных, но я новичок, учусь на frontend на Хекслете (второй проект). Можно задавать вопросы здесь?
Хм) Тогда лучше задавать вопрсоы в нашем телеграме https://t.me/hexletcommunity/12 Я буду скорее всего отдыхать, но может быть смогу ответить там.
Добрый день! Здесь есть ещё одно issue на адаптивность (issue#1448) - это одно и тоже задание? Также задавал вопрос в волонтерах на ТГ по отступам. Теперь лучше здесь задавать вопросы?
Добрый день. 1448 скорее про фикс. А тут задача для тестировщиков. Можете задавать здесь - тогда контекст задачи будет в одном месте
Правильно ли я понимаю, здесь достаточно указать проблему (скинуть скан, или адрес) с описанием где что ломается?
да, скриншот, адрес страницы. Главное чтобы понять, что сломалось, чтобы разработчики могли это починить.
ОК, ловите первую:
адрес (надо залогиниться) при размере меньше 576px отсутствуют горизонтальные отступы.
Если у селектора .row убрать margin-left, margin-right отступы возвращаются. При этом изменении на остальных разрешениях ничего не ломается на этой странице
адрес и адрес разрешение меньше 576 также отсутствуют отступы. Если в селекторе .row и в заголовках отключить margin-left, margin-right отступы появляются.
Так в принципе на всех страницах упражнений и списках решений на телефонном разрешении. Я думаю, что по отступам на малом разрешении достаточно сканов, согласны?
А можете подсказать на каких устройствах расширение 576 и меньше? Если таких устройств мало, может просто забить на них?)
Это практически каждый телефон. У меня это Pocophone 5m. Если посмотреть на дэвтулсе - это все Iphone от SE до 14го.
Я поясню, что я имел ввиду под разрешением 576px. Это горизонтальное разрешение (по сути width), телефоны редко бывают шире в горизонтали. Не знаю сколько людей будут учиться и решать задачи на телефоне. Теоретически можно повернуть телефон...
На примере страницы осилятора (надо зайти авторизованным) в main есть div с классом .container в нем заданы margin-left, margin-right на auto. В них вложены еще div`ы с классом .row в них заданы margin-left, margin-right: calc(var(--bs-gutter-x)*-.5). В девтулсе последние марджи в .row отключаю и появляются нормальные отступы на разрешении (width) менее 576px.
@canekg и всем. Тут ещё форма сломалась, как мне кажется. (скан старый, ещё без отступов, но сейчас также)
Также на разрешении 768px
На английской версии такого нет, и далее список решений не выходит за пределы экрана.