Estou na luta pra fazer um site e apresentá-lo no meu TCC. Separei as seções do site (body, head, cabeçalho, rodapé...) em arquivos isolados para poder mexer com mais facilidade. Tomei o maior cuidado de separar todos os elementos certos em cada arquivo. Eles aparecem no site porque minha página index.php tem include_once()
dessas páginas.
O problema começa aqui: Meu arquivo menu-lateral.php está ficando desconfigurado na sua versão mobile. Ele contém os botões de curtir página do Facebook, seguir perfil do Twitter, link para o Flickr e botão de inscrição na página do YouTube.
Aparentemente, o problema está com o botão curtir do Facebook. Sempre que o site está na sua versão desktop, não há problema, fica tudo certo:
Agora, na versão mobile, ela fica assim (segue foto). O botão está maior do que devia e passando da div
do menu E acrescentando um espaço enorme para o corpo da página.
Como deveria ficar:
Os outros botões vão ser substituídos por imagens, porém, quero continuar com o botão curtir do Facebook. Quero saber se é possível: 1) arrumar o problema de espaço na versão mobile; 2) deixar o tamanho do botão responsivo.
Segue o código do menu-lateral.php:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<div class="list-group-item">
<!-- Facebook -->
<div class="fb-page jumbo-img" data-href="https://www.facebook.com/ibnovomundo" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false" data-layout="box_count">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/ibnovomundo">
<a href="https://www.facebook.com/ibnovomundo">IBNM - Igreja Batista Novo Mundo</a>
</blockquote>
</div>
</div>
</div>
<center>
<div class="list-group-item">
<!-- Twitter -->
<a class="twitter-follow-button jumbo-img" data-size="large" data-show-count="false" href="https://twitter.com/ibnovomundo">Siga @ibnovomundo no Twitter</a>
</div>
<center>
<div class="list-group-item">
<!-- YouTube -->
<div class="g-ytsubscribe list-group-item jumbo-img" data-channel="batistanovomundo2" data-layout="full" data-count="hidden"></div>
</div>
<center>
<div class="list-group-item">
<!-- Flickr -->
<a href="http://www.flickr.com/photos/ibnovomundo2/" title="Veja nossas fotos no Flickr!"><img src="https://s.yimg.com/pw/images/goodies/white-see-my-photos_pt.png" class="jumbo-img" alt="Veja nossas fotos no Flickr!"></a>
</div>
</center>
<center>
<div class="list-group-item">
<!-- App -->
</div>
</center>
</div>
</div>
col-xs-6
da#sidebar
.