This is the following, I have a facebook plugin that is inside a DIV which in turn is the body of the page, This DIV has margins so when reducing the size of the window the plugin goes out of the DIV. I need to reduce the size of the window by reducing the size of the plugin.
<?php
include("fundo.php");
include("menu.php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CEJU</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script src="upload.js" type="text/javascript"></script>
<style>
#bodye {
margin:0;
height:auto;
margin-right:5% ;
margin-left:5%;
background:linear-gradient(rgb(0,153,255), white);
}
#boxes {
overflow: hidden;
width: 94%;
height: auto;
min-height:auto;
background: rgb(176,192,255);
color: rgb(0,0,153);
margin-left:2.8%;
box-shadow: 0px 3px 8px 2px;
color: rgb(53,53,53);
text-align: justify;
}
#leftborder {
float:left;
Width:3%;
height:660px;
overflow: hidden;
}
#rightborder {
float:right;
Width:3%;
height:660px;
overflow: hidden;
}
div.minha-div {
margin-left: 28%;
}
#testez {
flex-direction: row;
justify-content: center;
position: absolute;
z-index: 1;
top: 390;
}
#imgfundo1 {
position: absolute;
width: 7.5%;
height: 18%;
z-index: 0;
}
#imgfundo2 {
position: absolute;
width: 7.5%;
height: 18%;
z-index: 0;
}
#imgfundo3 {
position: absolute;
width: 7.5%;
height: 18%;
z-index: 0;
}
#imgfundo4 {
position: absolute;
width: 7.5%;
height: 18%;
z-index: 0;
}
.flex-container {
display: flex;
flex-wrap: nowrap; //wrap--- alterar para a imagem não ficar em cima da borda
align-items: center;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body id="bodye">
<br>
<div id="boxes">
<h1 align="center"><u>INICIO</u></h1>
<hr color="black">
<img id="leftborder" src="imagens/bordatt.png">
<img id="rightborder" src="imagens/bordattdireita.png">
<br> <br>
<div class="flex-container">
<div><img id="imgfundo1" src="imagens/face1.jpg"></div>
<div><img id="imgfundo1" src="imagens/face2.jpg"></div>
<div><img id="imgfundo1" src="imagens/face2.jpg"></div>
<div><img id="imgfundo1" src="imagens/face2.jpg"></div>
<div><img id="imgfundo1" src="imagens/face1.jpg"></div>
<div><img id="imgfundo1" src="imagens/face2.jpg"></div>
<div><img id="imgfundo1" src="imagens/face3.jpg"></div>
<div><img id="imgfundo1" src="imagens/face4.jpg"></div>
</div><br><br><br><br><br><br><br>
<div class="flex-container">
<div><img id="imgfundo2" src="imagens/face5.jpg"></div>
<div><img id="imgfundo2" src="imagens/face6.jpg"></div>
<div><img id="imgfundo2" src="imagens/face15.jpg"></div>
<div><img id="imgfundo2" src="imagens/face13.jpg"></div>
<div><img id="imgfundo2" src="imagens/face16.jpg"></div>
<div><img id="imgfundo2" src="imagens/face2.jpg"></div>
<div><img id="imgfundo2" src="imagens/face7.jpg"></div>
<div><img id="imgfundo2" src="imagens/face8.jpg"></div>
</div>
<br><br><br><br><br><br><br>
<div class="flex-container">
<div><img id="imgfundo3" src="imagens/face9.jpg"></div>
<div><img id="imgfundo3" src="imagens/face10.jpg"></div>
<div><img id="imgfundo3" src="imagens/face2.jpg"></div>
<div><img id="imgfundo3" src="imagens/face3.jpg"></div>
<div><img id="imgfundo3" src="imagens/face1.jpg"></div>
<div><img id="imgfundo3" src="imagens/face2.jpg"></div>
<div><img id="imgfundo3" src="imagens/face11.jpg"></div>
<div><img id="imgfundo3" src="imagens/face12.jpg"></div>
</div><br><br><br><br><br><br><br>
<div class="flex-container">
<div><img id="imgfundo4" src="imagens/face13.jpg"></div>
<div><img id="imgfundo4" src="imagens/face14.jpg"></div>
<div><img id="imgfundo4" src="imagens/face15.jpg"></div>
<div><img id="imgfundo4" src="imagens/face5.jpg"></div>
<div><img id="imgfundo4" src="imagens/face4.jpg"></div>
<div><img id="imgfundo4" src="imagens/face2.jpg"></div>
<div><img id="imgfundo4" src="imagens/face15.jpg"></div>
<div><img id="imgfundo4" src="imagens/face16.jpg"></div>
</div><br><br><br><br><br><br><br>
<div class="minha-div">
<iframe id="testez" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCeju-Laurival-K-Mayer-254501768620865%2F&tabs=timeline&width=500&height=800&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="600"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media"></iframe>
<br>
</div>
<br>
</div>
</body>
</html>
<?php
include("rodape.php");
?>
NOTE: I know my code is pretty dirty because of several id's, but I would still like the help of compadres. Thanks in advance.