Make facebook widget responsive

Asked

Viewed 60 times

0

I have a div that is put news, and in the laterial of this div, has the widget facebook, wanted his size to be responsive, IE, his height was the same as the news div

My current html:

 <div class="row no-gutters">
    <div class="col-lg-8 col-md-12" id="noticias">
        <h3 class="">Ultimas Notícias</h3>
        <div class="card mb-2">
            <div class="row no-gutters">
                <div class="col-3"
                     style="background:url(<?php echo $noticias[0]['imagem'] ?>) center;background-size: cover !important"></div>
                <div class="col-9">
                    <div class="card-block mx-2 my-1">
                        <div class="card-title mb-1">
                            <div class="text-muted float-right"><?php echo date('d/m/Y', strtotime($noticias[0]['dataenvio'])) ?></div>
                            <div class="font-weight-bold"><?php echo $noticias[0]['titulo'] ?></div>
                        </div>
                        <div class="card-text ">
                            <?php echo $noticias[0]['mensagem'] ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-2">
            <div class="row no-gutters">
                <div class="col-3"
                     style="background:url(<?php echo $noticias[1]['imagem'] ?>) center;background-size: cover !important"></div>
                <div class="col-9">
                    <div class="card-block mx-2 my-1">
                        <div class="card-title mb-1">
                            <div class="text-muted float-right"><?php echo date('d/m/Y', strtotime($noticias[1]['dataenvio'])) ?></div>
                            <div class="font-weight-bold"><?php echo $noticias[1]['titulo'] ?></div>
                        </div>
                        <div class="card-text ">
                            <?php echo $noticias[1]['mensagem'] ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb-2">
            <div class="row no-gutters">
                <div class="col-3"
                     style="background:url(<?php echo $noticias[2]['imagem'] ?>) center;background-size: cover !important"></div>
                <div class="col-9">
                    <div class="card-block mx-2 my-1">
                        <div class="card-title mb-1">
                            <div class="text-muted float-right"><?php echo date('d/m/Y', strtotime($noticias[2]['dataenvio'])) ?></div>
                            <div class="font-weight-bold"><?php echo $noticias[2]['titulo'] ?></div>
                        </div>
                        <div class="card-text ">
                            <?php echo $noticias[2]['mensagem'] ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class=" ml-2 col-lg-2 col-md-12">
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.12';
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>    </div>
</div>

Upshot inserir a descrição da imagem aqui

html css

  • Hello, Igor This div is doing what in HTML? <div id="fb-root"></div> You could put CSS too?

  • this div is part of the standard widget code, just copied from fb, it n adds nothing in css

1 answer

0

Hello, Igor

I get it. I believe that basically it is the structure of the code, I think it used Bootstrap as a framework.

I created from Bootstrap the new structure, left commented in the code, you can delete if you want, replace some columns, I ask you to look at the PHP code, because I may have let something escape and test this structure:

<div class="container-fluid">
<!-- Você pode alterar o container-fluid apenas para container -->
<div class="row no-gutters">
    <div class="col-md-10">
     <!-- Titulo Notícias -->
     <div  id="noticias" class="col-md-10">
        <h3> Ultimas Notícias </h3>
     </div>
     <!-- Início das notícias -->

     <!-- N0 -->
    <div class="card mb-2">
        <div class="row no-gutters">
            <!-- Imagem 
                col-3
            -->
            <div class="col-md-3"
                 style="background:url(<?php echo $noticias[0]['imagem'] ?>) center;background-size: cover !important"></div>
            <!-- Dados da Notícia
                col-9
             -->
            <div class="col-md-9">
                <div class="card-block mx-2 my-1">
                    <div class="card-title mb-1">
                        <div class="text-muted float-right"><?php echo date('d/m/Y', strtotime($noticias[0]['dataenvio'])) ?></div>
                        <div class="font-weight-bold"><?php echo $noticias[0]['titulo'] ?></div>
                    </div>
                    <div class="card-text ">
                        <?php echo $noticias[0]['mensagem'] ?>
                    </div>
                </div>
            </div>
            <!--FIM  Dados da Notícia -->
        </div>
    </div>

    <!-- N1 -->
    <div class="card mb-2">
        <div class="row no-gutters">
            <!-- Imagem 
                col-3
            -->
            <div class="col-md-3"
                 style="background:url(<?php echo $noticias[1]['imagem'] ?>) center;background-size: cover !important"></div>
            <!-- Dados da Notícia
                col-9
             -->
            <div class="col-md-9">
                <div class="card-block mx-2 my-1">
                    <div class="card-title mb-1">
                        <div class="text-muted float-right"><?php echo date('d/m/Y', strtotime($noticias[1]['dataenvio'])) ?></div>
                        <div class="font-weight-bold"><?php echo $noticias[1]['titulo'] ?></div>
                    </div>
                    <div class="card-text ">
                        <?php echo $noticias[1]['mensagem'] ?>
                    </div>
                </div>
            </div>
            <!--FIM  Dados da Notícia -->
        </div>
    </div>

    <!-- N2 -->
    <div class="card mb-2">
        <div class="row no-gutters">
            <!-- Imagem 
                col-3
            -->
            <div class="col-md-3"
                 style="background:url(<?php echo $noticias[2]['imagem'] ?>) center;background-size: cover !important"></div>
            <!-- Dados da Notícia
                col-9
             -->
            <div class="col-md-9">
                <div class="card-block mx-2 my-1">
                    <div class="card-title mb-1">
                        <div class="text-muted float-right"><?php echo date('d/m/Y', strtotime($noticias[2]['dataenvio'])) ?></div>
                        <div class="font-weight-bold"><?php echo $noticias[2]['titulo'] ?></div>
                    </div>
                    <div class="card-text ">
                        <?php echo $noticias[2]['mensagem'] ?>
                    </div>
                </div>
            </div>
            <!--FIM  Dados da Notícia -->
        </div>
    </div>
    </div>

    <!-- Segunda Coluna -->
    <div class="col-md-2">
        <!-- Facebook -->
        <div id="fb-root"></div>
        <script>
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.12';
                fjs.parentNode.insertBefore(js, fjs);}
                (document, 'script', 'facebook-jssdk'));
        </script>

        <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true">
            <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
                <a href="https://www.facebook.com/facebook">Facebook</a>
            </blockquote>
        </div>
    </div>
</div>

I tested and the structure was cool, but since I don’t have php, I couldn’t see with the news.

  • did not work, still with a fixed size

  • Add this class to your css class="fb-page" and add padding-top: 1em;

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.