Как избежать встраивания Instagram, чтобы увеличить ширину контейнера div на мобильном телефоне?

Question

Я создал простую страницу и добавил пару постов в Instagram.

https://bjoernschefzyk.co

Проблема заключалась в том, что в 100% случаев Insta Виджеты увеличили ширину контейнера div, что вводит горизонтальную прокрутку на мобильном телефоне. Я частично решил эту проблему, поместив код Insta в div с width: 300px;, однако на Chrome на Android и по какой-то причине также в браузере LinkedIn в приложении на iOS, который не работает согласованно. Похоже, проблема заключается в том, что виджет Instagram изначально визуализируется шире, а затем изменяется, но в этот момент контейнерный div уже шире.

Вот пример того, как выглядит проблема:

Есть идеи, как мне это исправить?

Answer 1

У вас есть свойство max-width: 500px, примененное к контейнеру, iframe (540px) и разделу содержимого, поэтому оно расширено до максимальной ширины на меньших экранах. Это вопрос отзывчивости. Поэтому измените max-with на 100%, когда размер экрана меньше 500px:

@media screen and ( max-width : 500px ) {
  #content {
    max-width: 100%
  }
}

Затем ширина элемента '#content' все равно будет превышать ширину вида, потому что ваше свойство размера блока на по умолчанию content-box, что означает ширину 100% + padding + border px. Вместо этого измените его на border-box, тогда окончательный CSS должен быть:

@media screen and ( max-width : 500px ) {
  #content {
    max-width: 100%;
    box-sizing: border-box;
  }
}