WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Making Facebook Comments Responsive (12 posts)

  1. RWSD
    Member
    Posted 2 years 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

  2. azabu
    Member
    Posted 2 years ago #

    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 ;-)

  3. RWSD
    Member
    Posted 2 years ago #

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

  4. RWSD
    Member
    Posted 2 years ago #

    Works Great! thank you so much!

  5. azabu
    Member
    Posted 2 years ago #

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

  6. jakobde
    Member
    Posted 1 year ago #

    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 :-)

  7. RWSD
    Member
    Posted 1 year ago #

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

  8. azabu
    Member
    Posted 1 year ago #

    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,

  9. whateverfree2
    Member
    Posted 1 year ago #

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

    The code above worked for me.

    Source: http://www.wordpresshosting.info/

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  11. zofie86
    Member
    Posted 1 year ago #

    <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!!

  12. dreamingofherbs
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic