Team! Hope you are well today :)

Hello Team!

Hope you are well today :slight_smile:

https://wordpress.org/support/plugin/facebook-comments-plugin

It exceeds the normal mobile width and I wanted to make it the width of the mobile site screen. Could you please help? I have child theme enabled and it’s the first site registered with you guys :slight_smile:

Cheers

  • Adam Czajczyk
    • Support Gorilla

    Hey Greg,

    I hope you’re well today and thank you for your question!

    Since you’ve a few domains registered with us I wasn’t exactly sure where to look, so I’ve downloaded the plugin and gave it a try on my own setup. This code is working on my site and I’m pretty sure it should also work fine on yours:

    .fb-comments iframe {width:280px!important;}

    The code above is just an example on how to resize Facebook comments form here. To make it work as “responsive” and adjust to various screen resolutions (“widths” to be precise) you will want to use code like this below:

    @media screen and (max-width: 768px) {
    .fb-comments iframe {width:728px!important;}
    }

    @media screen and (max-width: 320px) {
    .fb-comments iframe {width:280px!important;}
    }

    To apply this code add it to your child theme’s style.css file, preferably near the end of it. You may also want to adjust width values and perhaps add a few more “@media…” blocks to handle more screen resolutions.

    I hope that helps!

    Cheers,

    Adam

  • Greg
    • The Incredible Code Injector

    Thanks for your help today! Its the True Local website :wink:

    I added the code you gave however that made it worse, and non-responsive at all to the size of the screen dimension so I removed it. With the code you provided gone, it is responsive up until mobile view where it is too much width.

    Attached mobile of it without the code above.

    Hope you can still help :slight_smile:

    Cheers

  • Adam Czajczyk
    • Support Gorilla

    Hey Greg!

    I added the code you gave however that made it worse, and non-responsive at all to the size of the screen dimension

    I admit I’m a bit surprised however, as I said before, this was tested on my site and not yours :slight_smile: Is there any chance that I could access your site to take a closer look? I’m sure I’ll come up with a proper CSS that will work for you!

    You could grant me an access by following this guide:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Cheers,

    Adam

  • Greg
    • The Incredible Code Injector

    Since we’re on the subject and you’re looking under he hood, can you see why the FB comments is part of the content section and not a separate box like the default WP comments?

    Appreciate the help :slight_smile:

    Cheers

  • Predrag Dubajic
    • Support

    Hi Greg,

    It looks like the plugin is calculating width of iframe to give it after page load, but it looks like it doesn’t do it properly.

    Can you try applying this CSS fix and see if that works:

    @media screen and (max-width: 1200px) {
    .fb_iframe_widget_fluid > span,
    .fb_iframe_widget_fluid span iframe {
    width: 100%!important;
    }
    }

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    Hi Greg,

    Sorry, I forgot to hide site URL, I have removed the screenshot now.

    Let me know if you are still not seeing the changes after clearing the cache.

    I was using Chrome Android phone but it shouldn’t make much difference, if you do however continue to see it like that please let me know and I’ll call in some of our staff with iPhone to test.

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.