arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана проблема «сайт плывёт на большом мониторе»: почему секции не ограничивают ширину контента, класс контейнера как правильное место для max-width, установка max-width 1920px (или другого значения), центрирование через margin auto. Секции — это фоны и вертикальные отступы. Ширина контента ограничивается на контейнере внутри секции. Max-width 1920px — частое решение для широких мониторов: при меньшем экране контейнер занимает 100% ширины, на большем — остаётся 1920px и центрируется. Урок для тех, кто завершил вёрстку и увидел, что на широком мониторе сайт «растягивается». Быстрое решение — одно свойство на контейнере. Понимание разницы между секцией и контейнером в Taptop нужно как предварительная база.

Сайт плывёт на большом мониторе: простое решение

Сайт на обычном экране выглядит хорошо. Открываешь на большом мониторе — контент тянется на всю ширину. Как ограничить ширину контента без потери адаптива?
Секции — фоны и вертикальные отступы, контейнер — ширина контента. Max-width задаётся контейнеру, не секции. После — центрировать через margin: auto по горизонтали. Одно изменение в классе контейнера — везде работает. Для новичков. После просмотра сайт корректно отображается на всех размерах мониторов.
Тайминги видео
00:00 — Если твой контент на 4К мониторах 00:37 — разрешении 2.560 пикселей видим первые проблемы 01:15 — После этого контент ограничен, но прижат

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока