How do I make a face book plugin responsive?

0

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.

    
asked by anonymous 09.07.2018 / 16:57

0 answers