Uma das coisas mais chatas que tem nesta moda da responsividade* de websites é quando alguns elementos fogem ao nosso controle. A Like box do Facebook é um bom exemplo disso. É necessário informar o tamanho que você quer que o widget tenha. E isto pode criar uma quebra no seu layout.

face

Para resolver isso, basta pegar o código da Like Box normalmente, adicionar no lugar desejado e adicionar o código abaixo a sua folha de estilos.

#fb-root {
    display: none;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

Testei o código acima com a like box usando o script em HTML 5. Não testei com a versão em iframes. Veja em ação aqui mesmo na lateral do blog.

*Um website responsivo é quando ele se adequa ao tamanho do dispositivo que o lê. Ele se adapta bem tanto no iPad como no celular ou em várias resoluções de desktop. Nosso layout é responsivo, faça o teste redimensionando a janela do seu navegador ou acessando de outro dispositivo que não seja o desktop.

Dica vinda deste gist.

Comente

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *