Блог

Я хочу встроить перемотки в facebook с моей страницы развлечений на своем веб-сайте. Теперь у меня есть две красивые колонки среднего размера, но у меня есть проблемы с адаптацией рамок для обзоров на facebook.

Во-первых : при уменьшении масштаба мои кадры на правом сайте перекрывают кадры на левом сайте, поэтому я не могу видеть левый сайт, пока мой экран не станет меньше по размеру — > как изменить размер до col-11 раньше, чем в малом размере?

Во — вторых: Есть некоторые обзоры с фотографиями и без фотографий, отзывчивость отзывов без фотографий хорошая, но при размере xs мои обзоры с фотографиями сокращены-они не меньше, но они наполовину вырезаны на моем экране, кроме того, у меня большое левое поле — > возможно, отсутствие этого поля может решить эту проблему, но как удалить поле при размере xs или как уменьшить мои мнения с фотографиями ?

HTML:

 <form class="bg-white p-1 ml-5 border-top col-md-11 col-sm-11 col-xs-11">
<div class="p-3 ml-1 row justify-content-center">
    <div class="col-11 col-md-6">
        <br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https:_fbid=5070347956313889&id=100000162050801amp;show_text=trueamp;width=500"
                width="" height="712" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <br><br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https://www.facebook.com%posts/3904205019614977amp;show_text=trueamp;width=500"
                width="" height="458" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <br><br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https://www.facebook.733940553334393amp;show_text=trueamp;width=500"
                width="" height="773" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    </div>
    <div class="col-11 col-md-6">
        <br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https://www.facebook581364205233913amp;show_text=trueamp;width=500"
                width="" height="193" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <br><br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https://www.facebook.co2F5798507973556536amp;show_text=trueamp;width=500"
                width="" height="713" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <br><br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https://www.facebook.csts/1903086733182619amp;show_text=trueamp;width=500"
                width="" height="207" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <br><br>
        <iframe class="frame container-fluid"
                src="https://www.facebook.com/plugins/post.php?href=https://www.facebook.com/monika.ostrowska.338/posts/3257634417676254amp;show_text=trueamp;width=500"
                width="" height="227" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
        <br>
    </div>
</div>
 

CSS

 .frame {
display: block;
 

}