Does anyone have any potential solution or workaround for this?
I took the code from Facebook's embed tool and added some chatGPT assistance to make it visually match the other two blocks it is sandwiched in between it.
Tool : https://developers.facebook.com/docs/plugins/embedded-posts/
Website I am working on: https://www.icomanteca.com
"Latest announcements" block on the first section of the landing page.
Code that I used:
<!DOCTYPE html>
<html>
<head>
<style>
.iframe-container {
display: flex;
justify-content: center;
align-items: center;
}
.iframe-wrapper {
width: 360px; /* Adjust the width as needed to prevent cropping */
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.iframe {
width: 100%;
height: 432px; /* Adjust the height as needed */
border: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="iframe-container">
<div class="iframe-wrapper">
<iframe class="iframe" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ficomanteca&tabs=timeline&width=318&height=439&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=true&appId" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
</body>
</html>