On the page there is a block:

.steps_item { display: inline-block; vertical-align: top; width: (100%/3); box-sizing: border-box; position: relative; padding-top: 292px; transition: width .3s linear; @include adaptive(900px, 900px) { width: (100%/2); } @include adaptive(mobile) { width: (100%); } }

It has an absolutely positioned pseudo-element:

 .steps_item::before { content: ''; position: absolute; width: 81.21%; height: 0; // эта и следующая строчка используются для зависимости padding-bottom: 88.4848%; // высоты от ширины top: 0; left: 50%; transform: translateX(-50%); background-repeat: no-repeat; background-size: cover; z-index: 1; }

Now when resizing the browser window, the pseudo-element behaves as it should, its size changes proportionally depending on the width of its parent.
But there is one problem: in this code, the parent’s padding-top set rigidly in pixels, which is necessary in order to shift the rest of the content below the pseudo-element + indent from it.
So, how to make this padding depending on the dynamic height of the pseudo-element?

    1 answer 1

    The dynamic height of a pseudo-element depends on its width, and that, in turn, depends on the width of the element, which depends on the width of the screen.

    At the selected screen resolution, when 292px look best, calculate how much% of the screen width is 292px (suppose 20%) and replace

     padding-top: 20vw;
    • wrapped the block in another div, it already considers the width from the screen, and the item itself and everything in it already from it .... not the best approach, but it will go .... I'll try your advice, but later ... Thank. - pepel_xD
    • That's why I immediately advised in vw. I was sure that the main unit would be wrapped many times over. - KAGG Design