Как сделать, чтобы всегда был отступ от блока?

Question

[tkachenkoaanna097]

сейчас в адаптиве .account__inner практически полностью закрывает .account__image
а на маленьких разрешения - полностью
+если добавить много контента - блок вообще будет странно смотреться (по высоте)

Comments

[Ankhena]

Как сделать, чтобы всегда был отступ от блока?

Например, задать отступы, убрав абсолют с трансформом.

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

[tkachenkoaanna097]

Ankhena,

Например, задать отступы, убрав абсолют с трансформом.

но тогда я по ширине не могу его сделать
на 50% ширины экрана
+ слева расположить

[Ankhena]

tkachenkoaanna097, так слева расположить или чтобы отступы были?
Ну или не делайте отступ слева.

на 50% ширины экрана

У вас на 70% в коде.
И на 50% на мобилках это совсем узенькая полоска. Уверены, что так нужно?

А лучше покажите картинку как должно выглядеть.

[Ankhena]

tkachenkoaanna097,
ширина 50%, отступы внутри
и верхний и нижний отступ, чтобы было видно картинку
https://jsfiddle.net/rjkfxtca/

[tkachenkoaanna097]

Ankhena, имела ввиду, чтобы блок прижимался влево cтраницы
вот так не совсем костыльно будет? или вполне нормально?

https://jsfiddle.net/ua5y9L2b/

[Ankhena]

tkachenkoaanna097,
Я за padding у родителя, а не margin у ребенка.
Сейчас у вас у account__image задан флекс (вообще лишний, кстати, в этой ситуации) и только это спасает от схлопывания вертикальных margin.

И вы забыли учесть box-sizing. Сейчас ваш блок в результате вовсе не 50%. Т.е. либо задать border-box либо вычесть паддинги из ширины.