Как сделать iPhone адаптивным?

Question

[Mononokien]

Сделал вот такую верстку:

Интересует картинка айфона, собственно её код:

<header>
  <div class="head-wrapper">   
    <div class="iphone-img"></div>
  </div>
</header>

header
  background-image: url('../img/header-bg.jpg')
  height: 100vh
  max-height: 950px
  width: 100%
  background-position: center
  background-repeat: no-repeat
  background-size: cover
  background-color: pink
  background-position: center

.head-wrapper
  margin: 0 auto
  max-width: 1230px
  width: 100%
  position: relative

.iphone-img
  position: absolute
  background-position: center
  background-image: url('../img/iphone-img.png')
  background-size: contain
  background-repeat: no-repeat
  height: 250%
  width: 100%
  max-height: 920px
  max-width: 650px
  bottom: -190%
  right: 0%

Очень не нравится как ведёт себя адаптивка. Хотелось бы чтобы она держалась на белом фоне, а не уходила на background-image.
Подскажите как сделать нормальную адаптивку или верстку этого элемента.

Answer 1

[Иван Вишневский]

Мы, конечно, по коду сразу разберём контекст и точно поймём, как на вашем браузере и на вашем компьютере выглядит ваш сайт. Есть проблема - сымитируйте её в codepen, и только потом отправляйте на тостер.

Comments

[Mononokien]

Спасибо, не знал про codepen, позже поправлю

Answer 2

[Mark]

в стиле .iphone-img

max-height: 920px
  max-width: 650px

пробовал это убрать?