Адаптивный дизайн Wordpress не работает на мобильных устройствах правильно

Question

Контент iframe отлично работает на настольном компьютере, но не на мобильном. (у меня есть один сайт - одностраничный сайт - загрузка внутри другого.)

http://chessfusco.com/sb/home/ican/

В настоящее время это: http://chessfusco.com/ican/ на странице сайта http://chessfusco.com/sb

Я добавил предложенные теги и CSS в таблицу стилей.

код на странице:

<div class="iframe-container"><iframe src="http://chessfusco.com/ican/" allowfullscreen="allowfullscreen"></iframe></div>

Код в таблице стилей:

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0px;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */

.iframe-container-4x3 {
  padding-top: 75%;
}

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

Я заранее прошу прощения, если на этот вопрос уже был дан ответ, но я не смог ничего найти, и это мое последнее средство. Заранее спасибо! :)