Прошу помочь разобраться, сверстал макет из рассылки под названием Zeos, изначально не придал значения что ширина у макета 2000px (скрин с размерами ниже)
Открыл своё детище на мониторе с меньшим разрешением и горе, не влазит полностью всё, приходится в браузере процент отображения уменьшать чтобы всё поместилось.
Подскажите что можно сделать. Дело в том что там и макет большой и элементы в нём огроменные. Я самоучка, курсы позволить себе не могу, так что строго прошу не критиковать.
В своей верстке вы не используете центровщик содержимого. То есть кроме общей ширины макета, вы должны были определить и контентную ширину (примерно 1570 получается). Также для фоновых изображений не забывайте добавлять background-size: cover; чтобы фон корректно масштабировался в зависимости от ширины экрана просмотра.
Старайтесь как можно меньше использовать свойство width для сеточных элементов страницы. Прописывая ее изначально 2000px, вы привязываетесь к одному единственному разрешению.
Исправьте хотя бы эти недочеты, а потом можно будет перейти к разбору верстки подробно по блокам.
Добрый день. Спасибо за отклик. Я внёс изменения предложенные Вами и попытался переделать вёрстку блоков на флексах. Добавил контейнер для центровки, правда на 1300 пикселей. Ситуация изменилась конечно, но как быть с картинками, они большие согласно макета, их все размеры с вёрстки я поубирал, всё исходно. Так же не масштабируюются шрифты, они остаются большими.
Пример переделанного по ссылке https://orlandis.github.io/1/
Не совсем верно получился центровщик у вас. Блок с классом cont должен располагаться внутри header, понимаете? Вы должны центрировать контент внутри блока, а не сам header.
Статья по поводу шрифтов: https://webref.ru/recipe/2370
Что касается картинок, то здесь будет не обойтись без медиа-выражений.
По-поводу центровщика, если я Вас правильно понял, глобальные секции header и main остаются на 100% ширины и держат в себе бекграунды, далее в этих блоках создаётся центровщик, который оптимально, я сделаю, шириной в 1200пикс, и там уже все остальные блоки будут центроваться, поправьте если ошибки ?? Второе, правильно ли я делаю используя флексы для позиционирования блоков ?? По-поводу статьи о масштабировании шрифтов - низкий поклон, проходил вроде внимательно он-лайн курс и не помню, чтобы там говорилось о данной единице измерения. Подведя итог нашего общения, могу предположить что данный макет не адаптировался дизайнером под стандартный размер фиксированной разметки, обычно это 960 - 1200пикселей, далее, на размеры этих макетов можно не обращать внимания и делать чисто для себя, подбирая свои размеры чтоб смотрелось приближённо к макету, я правильно думаю ??
Да, здесь вы правы.
Использование флексов считаю неоправданным - в макете слишком мало контента. Можно обойтись обычным абсолютным позиционированием для изображений. Но только с грамотным сочетанием с относительным позиционированием. Чтобы не получилось top: 1600px; как у вас было в первом варианте.
Если ваша цель не pixel perfect, то для себя можете и приближенно делать, по крайней мере на начальном этапе, пока учитесь выстраивать сетку страницы.
Вы имеете ввиду разбивать сетку на несколько абсолютных блоков и внутри них относительно позиционировать элементы страницы ?? Есть у Вас хороший материал по сеткам, нужно нормально разобраться в этой теме ??
Добрый день. Ineska, я продолжил заниматься данным макетом, заметил такой момент, Вы мне советовали использовать background-size: cover; , но я попробовал с параметром contain и тогда на любом устройстве(разрешении) фоновая картинка красиво полностью отрисовывается на весь вьюпорт. Ещё один момент, при использовании как с cover так и contain формируется нижний отступ у блока с фоном, его можно как-то убирать
