Задать вопрос
@URart

Как правильно сверстать отзывчиво шапку с разными отступами по краям страницы?

Доброго времени суток! Я в процессе обучения отзывчивого и адаптивного CSS. Беру макеты с фигма и пытаюсь сверстать. Суть вопроса в следующем, как правильно сверстать отзывчивую шапку с разными отступами от краев страницы?

ссылка на макет: https://www.figma.com/file/dTpEEtJiXjELGomz4zZ93a/...

63d3d50c67053996011574.png

P. S. Рандомный дизайн из джэм фигмы. Хотелось бы еще узнать мнение людей с опытом, это пример плохого дизайна?
P. P. S. Хочу научиться делать дизайн пиксель в пиксель или это не нужно? Буду рад любым мнениям и советам
  • Вопрос задан
  • 164 просмотра
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@Sozdavan
Чтобы создать адаптивный заголовок с разными отступами от краев страницы, вы можете использовать CSS для установки ширины и полей элемента заголовка. Вот пример того, как вы можете это сделать:

<header>
  <h1>My website</h1>
</header>


header {
  width: 90%;
  margin: 0 5%;
}


В этом примере элемент заголовка имеет ширину 90% от ширины области просмотра и поля 0 сверху и снизу и 5% слева и справа. Это заставит заголовок занимать 90% ширины экрана с отступом в 5% с каждой стороны. Вы также можете использовать медиа-запросы для изменения стиля заголовка при разных размерах экрана, например:

@media (min-width: 768px) {
  header {
    width: 80%;
    margin: 0 10%;
  }
}


Это применит новые стили, когда ширина экрана будет не менее 768 пикселей. Вы также можете использовать CSS Grid или Flexbox, чтобы сделать адаптивный заголовок с разными полями

P.S. Если учитесь - главное пытаться и делать. Упорство и труд - всё перетрут. А дизайн на вид норм
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
У вас центрированная шапка. Это просто неаккуратность дизайнера.
И здесь важны не отступы от краев, а ширина.
Тое есть примерно так

.header {
  width: 990px; /*да, именно столько. Не нужно цепляться к пикселям! */
  margin: auto;
}


и всё.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы