CODEWITHSUNDEEP
facebookpluginswidth
Eivind
Eivind

Reputation: 11

Facebook page plugin width not applying

I have the following code set up on my page used to display the facebook plugin: 

<div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="280" style="float: left; margin: 10px;">

This worked fine until a couple of days ago. Now for some reason it is stuck on width 180px it seems - yet in the code it says 280px. Anyone know why this is? Check it out here: www.bikefinder.no (Plugin left side of pic).

Thanks for input!

Upvotes: 1

Views: 2688

Answers (2)

Yugal Jindle
Yugal Jindle

Reputation: 45716

As the documentation on Page Plugin doc says under the heading Adaptive Width:

  • Probably your container is 0 px or display: none at the time of page load.
  • The plugin tries to get to a minimum width, 180px in this case
  • So, if you ensure your container has wdith >= configured_width, it should work.

Code:

<div style="min-width: 180px">
    <div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="180" style="float: left; margin: 10px;">
</div>

// min-width would ensure its 180px or greater

Upvotes: 1

Selay
Selay

Reputation: 6464

It checks parent (container) width, which overrides data-width attribute. You can wrap it inside a fixed-width div, for example. 

<div style="width:300px">
<!--Page plugin's width will be 300px no matter what you set in data-width-->
  <div class="fb-page" ... 

</div>

By the way, the container and its parents should be visible during page loading otherwise it will be read as 0.

You can read more details here

Upvotes: 0

Related Questions