Создание адаптивного Iframe + встраивание в Squarespace - PullRequest
Новая
       16

Создание адаптивного Iframe + встраивание в Squarespace

0 голосов
/ 08 марта 2019

Попытка сделать отзывчивый iframe для размещения на сайтах SS, чтобы я мог использовать внешние формы, а также демонстрацию моего PWA.У большинства потоков, которые я нашел в исследовании стека, есть битые ссылки.

Хорошо, вот оно.

Мой тестовый сайт www.sunfoundry.com/test123

У меня естьуспешно сделал iframe совпадающим по ширине с другим предложением в блоге со следующим кодом:

Но после проверки он не отображает высоту страницы ни на рабочем столе, ни на мобильном телефоне.

В конечном итоге моя цель состоит в том, чтобыбыть в состоянии получить отзывчивый iframe в контейнере изображений как iphone для предварительного просмотра моего pwa, но сейчас я возьму только iframe 

<div class="resp-container">
  <iframe class="resp-iframe" src="https://mydbcx.com/?u=jwelle&c=225A13500A&hs" gesture="media" allow="encrypted-media">   </iframe>
</div>

<style>
  .resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
  }
</style>

<style>
  .resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
...