Адаптивность⁠⁠

Вот мой CSS:

.demopage-preview_item {

display: block;

height: 480px;

width: 100%;

margin: 0 auto;

padding: 5% 6% 23% 5%;

background: url("mac.png") no-repeat;

background-size: contain;

position: relative;

z-index: 10;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.demopage-preview_inner {

height: 100%;

width: 100%;

position: relative;

display: block;

overflow: hidden;

}

.demopage-preview_inner:after {

content: '';

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

transition: all .1s;

}

.demopage-preview_inner:hover:after {

box-shadow: inset 0 0 11px 2px white;

}

.demopage-preview_inner img {

left: 0;

position: absolute;

top: 0;

transition: all 4s ease 0s;

width: 100%;

}

.demopage-img {

background-position: 0 0;

transition: all 4.5s;

background-size: cover;

margin-top: -2.9em;

}

.demopage-img:hover {

background-position: 0 100%;

}

А это HTML:

<div class="demopage-preview_item">

<p>&nbsp;</p>

<div class="demopage-preview_inner demopage-img demopage-img_1" style="background-image: url(дочерняя_картинка.jpg)"></div>

</div>

Это разметка, которая работает на обычных мониторах.

Попробовал. Все равно вылезает. Если поможет, то CSS для этой конструкции скину.

Друзья мои!

Спасибо всем, кто откликнулся на мою просьбу. Проблема с адаптивностью решена.