Содержит встроенный пост Facebook внутри родительского контейнера

Question

У меня есть простая карта с четырьмя столбцами (сетка Bootstrap), которая сворачивается к одноколоночному макету на мобильном устройстве. Я хочу добавить сообщение Facebook в одну из карточек. Проблема в том, что встроенные сообщения Facebook на рабочем столе не расширяются/сворачиваются, чтобы заполнить их родительский контейнер, как это происходит на мобильных устройствах. Я хотел бы знать, есть ли способ обойти это. Мои карты имеют ширину около 270 пикселей, что ниже минимальной ширины 350 пикселей для рабочего стола, согласно their docs.

Мой контейнер является простым DIV так:

<div class="content"> 
    <div class="fb-post" data-href="{{post.facebook_link}}"> 
     <!-- Here is what the embedded post's structure looks like --> 
     <span> 
      <iframe> 
       <!-- Widget lives in here --> 
      </iframe> 
     </span> 
    </div> 
</div> 

Прямо сейчас, когда я встраивать пост в одной из моих карт, пост заставляет карты расширения, которые кораблекрушений мой макет (см приложение). Я ищу способ заставить пост заполнить родительский контейнер либо через решение CSS/JS, либо обмануть SDK Facebook, думая, что он на мобильном устройстве.

Я столкнулся только с one other post по этому вопросу, но этот человек явно хотел получить мобильную версию сообщения. В моем случае мне все равно, является ли это мобильной версией или настольной версией, пока я могу заставить ее заполнить родительский контейнер. По этой причине этот вопрос: не a duplicate.

До сих пор я пытался манипулировать высотой/шириной элемента iframe и/или его родительского элемента span, но как только я отрегулирую эти числа, изменения будут отменены, так как SDK устанавливает их динамически.

Answer 1

Один из способов обойти это то, что работает для меня, было использование скрытых и видимых дивы с помощью начальной загрузки 3 CSS и корректировать данные ширины в facebook кода в соответствии с размером контейнера. Я использовал это на своем сайте здесь link to page, если вам нужен живой пример. Я понимаю, что вы используете iframe, но это был единственный вариант, который я смог найти для своего сайта. Я представил свой код здесь только в качестве ориентира, чтобы проиллюстрировать мою точку зрения, однако вы будете иметь возможность укладывать его лучше, чем у меня, как я неаккуратный кодировщик, я боюсь ...

https://jsfiddle.net/andydry1/6t5o2n8z/1/

data-adapt-container-width="true" *make sure this is set to true* 

data-width="300" *change width to suit extra-small, small and large divs * 

Это не точный ответ на вашу ситуацию; Однако это может оказать некоторую помощь :-)