On sort un petit peu de la ligne éditoriale classique du design, graphisme pour se relancer dans les éléments pour les réseaux sociaux et le design responsive.
Il arrive quand on crée des sites, d’avoir des clients qui souhaitent avoir une like-box Facebook (que vous pouvez créer facilement). Chose tout à fait ordinaire. Cependant quand on regarde de plus près le code, celui-ci est inclus dans une iframe qui ne permet pas de changer la hauteur (height) et la largeur (292px de base). Le problème est le suivant, quand on créé un site en design responsive, la box Facebook, elle, ne se redimensionne pas. Elles reste figée à sa taille définie. Logique.
Comment rendre la Box Facebook Responsive ?
La solution est très simple mais on ne peux pas l’inventer si on ne connait pas cette petite astuce qui se règle tout simplement en CSS. Vous avez juste à inclure dans votre feuille de style les petites lignes CSS suivantes.
/* Cet élément block le script injecté dans l'iframe. On le cache */
#fb-root { display: none; } /* on redéfini la taille du contenu */ .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }Voila donc, c’est tout simplement grâce à cela que vous allez avoir une belle box responsive. Ce bout de code est vraiment utile car comme vous le savez, les sites responsives indispensable aujourd’hui pour pouvoir être visibles sur tous les supports, qu’ils soient mobiles, tablettes ou autres. Un peu comme ce blog 🙂
Si cet article vous intéresse, vous serez aussi réceptif sur WEB2DAY 2012 – Astuces responsive design par Andreas Bovens ou encore 7 template design responsive gratuits