Facebook 推出的Social Plugin 蠻多客戶都在使用,但隨著RWD響應式網頁(Responsive web design)的崛起,越來越多客戶反映網站嵌入的Social Plugin,不是被截掉,就是無法100%滿版,如果在手機上看的話更慘不忍睹...。

尤其是最多人使用的fb-like-box plugin,Facebook上面只能設定絕對的寬度(data-width),如果你有嘗試設定100%,到了RWD響應式網頁上面,依然還是無法作用!下圖就是還尚未使用特殊的CSS語法來解決。

fb-like1

如果今天是RWD響應式網站,只要加入以下CSS語法以後,就可以輕鬆解決,讓fb-like-box Plugin的寬度達到100%,語法如下:

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

接下來我們就來看看修改後的畫面

fb-like2

那麼...手機畫面呢?

fb-like3

搞定.....收工!!

 

歡迎瀏覽更多網站設計教學 http://www.injerry.com/blog.php?webpage=blog

文章標籤
創作者介紹
創作者 英傑銳數位設計 的頭像
英傑銳數位設計

英傑銳網路數位設計

英傑銳數位設計 發表在 痞客邦 留言(2) 人氣()


留言列表 (2)

發表留言
  • lan
  • 貼入也完全沒改變
  • s350990
  • l6tE奢侈品仿牌,,保固說到做到,,誠信經營,,,。。歐美廠家直銷,很多人都跟她訂購商品,她的商品真材實料 加LINE 的ID :【kk2023】諮詢,貨到付款,7天內無理由退換哦!~
    a6YJo