05Сетка и типографикаиз архива
гаттер 30 на десктопе и 10 на телефоне, почему всё разваливается
o.isaev показал 5 октября 2024
- Правки
- 5 правок
- Последняя
- 19 октября 2024
- В разборе
кейс
учебный проект, второй курс, сайт для выдуманной кофейни. сетка 12 колонок на 1440, поля 60, гаттер 30. на телефоне сделал 4 колонки, гаттер 10 и поля 10. на десктопе норм, на телефоне карточки слипаются и текст прилипает к краю. препод сказал «сетка не продумана» и всё. что не так то
правка 1
Поля 10 на 360 и есть главная проблема: текст почти у края экрана, палец его закрывает. Ставь поля 16 или 20, гаттер 16. И 30 на десктопе многовато для 12 колонок при полях 60, колонки выходят узкие, промежутки широкие, поэтому всё выглядит как решётка. Попробуй поля 80-120 и гаттер 24.
правка 2
в ответ @elena_kzn
так я специально сделал 10 чтобы больше влезало. на телефоне и так места нет
правка 3
в ответ @o.isaev
Больше влезает - это не цель. Цель, чтобы читалось. У тебя не читается.
правка 4
правка принятаавтор кейса взял в работу
Попробую с другой стороны, с того, как это потом сверстают. На телефоне я всегда закладываю поле 16, потому что у части телефонов скруглённые углы экрана и вырез, и всё, что ближе 12 px к краю, где-то срезается или уходит под жест «назад». Гаттер 10 при карточках с тенью: тени двух соседних карточек сливаются, отсюда твоё «слипаются».
Схема, которая почти всегда работает: 360 - 4 колонки, поля 16, гаттер 16; 768 - 8 колонок, поля 32, гаттер 16-24; 1440 - 12 колонок, контейнер 1200-1280, гаттер 24. И карточки на 360 лучше в одну колонку, а не в две по 156 px. В две там помещаются только цена и кнопка, название уже нет.
Схема, которая почти всегда работает: 360 - 4 колонки, поля 16, гаттер 16; 768 - 8 колонок, поля 32, гаттер 16-24; 1440 - 12 колонок, контейнер 1200-1280, гаттер 24. И карточки на 360 лучше в одну колонку, а не в две по 156 px. В две там помещаются только цена и кнопка, название уже нет.
правка 5
ладно, переделал на 16 и 16, карточки в одну колонку. препод посмотрел и сказал «вот теперь видно сетку». про тени не знал, они реально и слипались