Jump to content


Photo
- - - - -

Theme Cutting Off Facebook "like" Box Comment Drop-Down

facebook css

Best Answer Jenny , 29 January 2013 - 06:49 PM

Please visit PageLines -> Site Options -> Custom Code -> Custom CSS/LESS and add the following to the box:

 

 
body .entry_content iframe {
    max-width: 617%;
}

Hope that helps!

Go to the full post


  • Please log in to reply
12 replies to this topic

#1 danoah

danoah

    Super Member

  • Members
  • 132 posts

Posted 03 November 2012 - 07:06 PM

Hello, when I install a like button in the content itself (for example in the first paragraph of this post:

Please Login or Register to see this Hidden Content

) the drop-down is cut off and doesn't display properly after a user clicks like.

Google searches lead me to believe that there is a problem with the CSS somewhere. Any idea how I can fix that?

Thanks, Dan

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2012 - 10:53 PM

Dan, I'm not sure why it's doing that. Very weird, I dare say. I'm looking into it and should have some answers by Monday or so. Unfortunately, I'm a hurricane evacuee at the moment, so if I don't answer this again, please bump it to one of my colleagues.

#3 danoah

danoah

    Super Member

  • Members
  • 132 posts

Posted 04 November 2012 - 08:32 PM

BUMP

Thanks for your reply Rob, stay safe!

Any others have any idea how I can fix this?

#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 November 2012 - 01:38 AM

Hi there, the buttons seem to be using inline css which specify the width and height. I'd imagine these settings are built into the widget/plugin somewhere. At the moment it's showing a height: 86px & width: 49px.

I can't any css fixes for this other than the inline options. I'd say email the plugin author and see if he has a fix for the css or a container he can suggest we target.

#5 danoah

danoah

    Super Member

  • Members
  • 132 posts

Posted 14 November 2012 - 11:00 PM

Thanks for the reply. I don't use a plugin or inline CSS for these with the exception of float:right and padding (this problem happens when I eliminate the inline). I simply copy the code from Facebook's developer site.

I've also tried setting the width higher in the plugin itself.

I'm being told this is definitely theme/css related so any help would be really appreciated.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17636 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 November 2012 - 09:18 AM

Hi,

I don't use Facebook, so can you take a screenshot of the issue please. Also, where abouts on Facebook did you find the code, can you link it please and where/how did you add it to your site.

One last thing, please do not Bump topics.

#7 yoavtaler

yoavtaler

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 29 January 2013 - 02:10 PM

Hi. 

I have the same issue with the Facebook like button. I tried using the button with two different plugins, and the behaviour was the same. One of them is the Facebook plugin for wordpress, the other is called Facebook Button Plugin. The guys at the facebook developer forum claim this problem originates in the theme style.

here's a screen shot: 
facebook-bug.jpg

 

I'd appreciate a "custom code" solution...
I have no real knowledge of css coding. 

thanks a lot.



#8 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 29 January 2013 - 05:00 PM

Looking at your site I am not seeing a Like button in the middle of the paragraph and when I tested all the Like's and Sends for Facebook they seemed to work for me (I'm in fireFox). Would it be possible to include a screenshot so we can troubleshoot, please?



#9 yoavtaler

yoavtaler

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 29 January 2013 - 05:11 PM

Thanks.

My like buttons are before and after a post/page's content. I checked it both on latest chrome and safari on mac. The likes and sends are working, but the comment box is cut.  here's a full screenshot:

facebook-bug1-1024x640.jpg

thanks.facebook-bug1-1024x640.jpg



#10 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 29 January 2013 - 06:49 PM   Best Answer

Please visit PageLines -> Site Options -> Custom Code -> Custom CSS/LESS and add the following to the box:

 

Please Login or Register to see this Hidden Content

Hope that helps!



#11 yoavtaler

yoavtaler

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 29 January 2013 - 08:41 PM

Thanks Jenny. 
Well, it moves the whole comment box to the left and shows it completely. Which is good and functional.
Stil - Isn't there a "cleaner" solution? like making it appear where it should be? I'm no expert on css, but clearly something is overlapping the comment box.

 



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 January 2013 - 10:12 PM

Hi,

 

I think the solution Jenny provided is the best for the present.  You're able to test other CSS options using Firebug for Firefox or Chrome's Inspection Tool.



#13 yoavtaler

yoavtaler

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 30 January 2013 - 06:16 AM

thank you.







Also tagged with one or more of these keywords: facebook, css