@Drovosek01

Как сделать «динамический» padding?

Учусь верстать...
Сделал блок, в нем расположил элементы, блоку задал padding.

Проблема в том, что когда я в dev-tools меняю ширину окна, на определенном моменте картинки начинают "вылазить" вправо, а потом и вовсе уходят за экран.

5ba4f6a97b166716375465.png

Да, эту проблему можно решить медиазапросами, но они как-бы жёстко задают padding.
Мне хотелось бы, чтобы при уменьшении ширины окна, когда контент не помещался в рамки контейнера, то контент либо наезжал на padding, либо padding уменьшался.

Вот пример кода: https://codepen.io/Drovosek/pen/MqxONW
  • Вопрос задан
  • 1709 просмотров
Решения вопроса 2
rockon404
@rockon404
Frontend Developer
Как правильно верстают контейнер для контента:
.container {
  width: calc(100% - 32px);  // отступ по 16px в случае если страница <= 1024px
  max-width: 1024px;  // размер для примера
  margin: 0 auto;
}


max-width можно задать 100% и напрямую задать padding, само собой к ширине + 32px

.container {
  width: 100%;
  max-width: 1056px;
  margin: 0 auto;
  padding: 0 16px;
}
Ответ написан
@FalseCode
Очень плохой совет выше. Если верстать то так
.container {
  max-width: 1200px;  // делаем резиновым
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}


Дальше вам нужно поучить меда запросы:
Статья
Видео
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Nikita-Fast
@Nikita-Fast
SVGшник и леплю что попало
https://codepen.io/topicstarter/pen/NLJyQa?editors=1100
здесь я не исправлял вёрстку а чуть чуть поправил css - добавил три строки
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы