Making Facebook Comments Responsive

  • Resolved RWSD

    (@rwsd)


    12 years, 9 months ago

    Hey Guys,

    Not sure if this is the best place to post this but i’m sure some of you have done this before.

    I’m having a big issue trying to make Facebook comments responsive. I’ve come across so many posts saying “just do this..

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

    But this literally does nothing for me.

    The site i’m trying this on is ourvinyl.com. you could go to any of the post pages and see what i’m talking about. Can’t get it to collapse.

    Thanks for any help.

    -Matt

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hi,

    You can use this code to your php.

    <div class="fb-comments"data-href="<?php the_permalink(); ?>" data-num-posts="2" mobile="false"></div>
<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>

    It can be help you ??

    Thread Starter RWSD

    (@rwsd)

    I will put this to the test later today and i’ll let you know if it works. Thank you very much.

    Thread Starter RWSD

    (@rwsd)

    Works Great! thank you so much!

    Sounds good !
    If you find people who have same trouble, please let them know ??

    I am having the same problem with my facebook like box widget. I.e. I want to make it responsive. Can i use the same code as the one above? If yes, where should I put the code? Sorry I am such a beginner but i am eager to learn ??

    Thread Starter RWSD

    (@rwsd)

    Are you trying to get your like box to stretch across an area? Post a link if you can.

    Hi,
    Now you can use Facebook official plugin, just put the comments.
    Then use css below

    .fb-comments span {
    width: 100% !important;
}
.fb-comments iframe {
    width: 100% !important;
}

    Regards,

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @whateverfree2, See WordPress’ trademark policy regarding your domain name.

    <div class="fb-comments"data-href="<?php the_permalink(); ?>" data-num-posts="2" mobile="false"></div>
<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>

    Worked brilliantly!!

    where do i put the above css? into the themes custom css? a custom css plugin? or somewhere within the facebook plugin info?

    sorry i’m very new to all of this

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Making Facebook Comments Responsive’ is closed to new replies.