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

Question

[Drovosek01]

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

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



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

Вот пример кода: https://codepen.io/Drovosek/pen/MqxONW

Comments

[Игорь]

Классные стрелки)

[Drovosek01]

Игорь, та это я мышкой в программе "ножницы" в винде нарисовал. Просто так быстрее))

[Антон Спирин]

Drovosek01, рекоммендую поставть monosnap

[Drovosek01]

Антон Спирин, спасибо за рекомендацию, обязательно попробую.

Answer 1

[Антон Спирин]

Как правильно верстают контейнер для контента:

.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;
}

Comments

[Drovosek01]

А как в этом случае (https://codepen.io/Drovosek/pen/jvJdbM) сделать так, чтобы иконки были по центру и между ними был отступ 30px?
Нужно чтобы padding их "динамически" двигал на центр при изменении ширины.
Как это сделать не оборачивая картинки в еще один div?

[Антон Спирин]

Drovosek01,

.main__socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #222;
    padding: 30px;
}

Answer 2

[FalseCode]

Очень плохой совет выше. Если верстать то так

.container {
  max-width: 1200px;  // делаем резиновым
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

Дальше вам нужно поучить меда запросы:
Статья
Видео

Comments

[Drovosek01]

А как в этом случае (https://codepen.io/Drovosek/pen/jvJdbM) сделать так, чтобы иконки были по центру и между ними был отступ 30px?
Нужно чтобы padding их "динамически" двигал на центр при изменении ширины.
Как это сделать не оборачивая картинки в еще один div?

[FalseCode]

Drovosek01,
display: flex;
justify-content: center;
И элементам :
margin-right: 30px;

Answer 3

[Nikita-Fast]

https://codepen.io/topicstarter/pen/NLJyQa?editors=1100
здесь я не исправлял вёрстку а чуть чуть поправил css - добавил три строки

Comments

[Drovosek01]

А как в этом случае (https://codepen.io/Drovosek/pen/jvJdbM) сделать так, чтобы иконки были по центру и между ними был отступ 30px?
Нужно чтобы padding их "динамически" двигал на центр при изменении ширины.
Как это сделать не оборачивая картинки в еще один div?

[Nikita-Fast]

Drovosek01, https://codepen.io/topicstarter/pen/ZMPwmo?editors=1100 вот так