Ширина сайта по макету, как задать?

Question

[Shu90]

добрый вечер, подскажите пожалуйста, делал сайт по макету с шириной 1400px. На моем ноутбуке сайт в окне браузера имеет нижнюю полосу прокрутки. как адаптировать сайт под мою ширину экрана и под какую еще ширину экрана его желательно адаптировать? Нужно использовать медиа запросы? Если да то как?

Comments

[Ankhena]

и под какую еще ширину экрана его желательно адаптировать?

При любой ширине окна сайт должен выглядеть хорошо и не иметь горизонтальной полосы прокрутки.

[Shu90]

Ankhena, это я понимаю, я имею в виду как этого добиться, медиазапросами под разное разрешение или верстать сайт в процентах вместо точных размеров в пикселях? Как обычно делают когда верстают сайт по макету?

[Ankhena]

Shu90, универсального решения не существует. Выбор зависит от того, что нарисовано и от возможного наполнения контентом.

[Shu90]

Спасибо большое. Можно тогда последний вопрос на эту тему? Я использовал все подсказки и в итоге получилось так: https://shustart90.github.io/testwork/
Так достаточно адаптивно?

Answer 1

[Stalker_darkway]

width: 100%;
max-width: 1400px;

Comments

[Shu90]

Спасибо большое за ответ Но так режется контент, грубо говоря на сайте у меня слайдер с 4 элементами и если я даю width 100% а не 1400px у меня обрезается его 4ый элемент . Как мне настроить слайдер под ширину 100%? Через медиа запрос?

[Stalker_darkway]

Shu90, сложно сказать не видя перед глазами код и результат, но предположу, что:
если у вас 4 слайда на экране, то ширина каждого из них равна 350px. Можно установить 25% для каждого.
если у вас 4 слайда и каждый из них равен 1400px, то также каждому слайду установить ширину в 100%
P.S. Следите, чтобы изображения не поехали

[Shu90]

Вот ссылка на pages: https://shustart90.github.io/testwork/
то-есть вы рекомендуете мне перевести все размерности в плане ширины в проценты? А это нормально при верстке по макету?

[Stalker_darkway]

Shu90, если вы хотите адаптивность, то да, придется работать с процентами. Но в данном случае, я бы посоветовал вам попробовать что-то вроде slick-slider или owl-carousel для слайдера. У вас слайдер самописный и, например, на моем разрешении с шириной 1920px при установке #main {width: 100%;} последний слайд уезжает чуть ли не на середину. Придется дорабатывать решение.

[Shu90]

Stalker_darkway, ознакомлюсь с предложенными вами решениями, спасибо большое что потратили свое время, такое отношение очень помогает новичку

[Shu90]

Stalker_darkway, подскажите ещё пожалуйста даёт ли ссылка на pages полноту просмотра моего кода или что бы нормально поделиться ссылкой на проект надо давать ссылку на pull request? Никак не подружусь с github.