Ultimate Facebook messed up my site when viewing from mobile

Hey,
I recently installed Ultimate Facebook.
I thought everything is working great until I viewed my site from my smartphone.
when viewing from smartphone all the component related to Ultimate Facebook (Like,Share and comments) are shifted way to much to the right. (My site is RTL).
I added 2 photos from one of my post when viewing from mobile.
You can see how it looks from a computer here:
http://howtoeasy.co.il/all-guides/must-have-programs-for-new-pc/

thank you

  • Michelle Shull

    Hello, Maor!

    Your site isn't loading for me, but I've got some CSS for you that will apply only to mobile devices. You'll need to add it to a custom CSS file. Do you have a custom CSS plugin? If you've got Jetpack, it comes with one; some themes include a CSS editor, or you can get a plugin, like this one: https://wordpress.org/plugins/simple-custom-css/. Or, if you're using a child theme, you can just add this to the CSS file for your child theme.

    @media screen and (max-width: 780px) {
    fb:like.fb_iframe_widget {
    float: right;
    }
    fb:comments.fb_iframe_widget {
    float: right;
    }
    }

    Thanks for your question, Maor!

  • Maor

    Hey,
    As I was asked for by Jude, I copy my new thread's content about this problem to here:

    Hey,
    This is the second thread I'm opening about this problem but in my previous post no one is responding and I also gathered some more information about my problem since.

    So I installed Ultimate Facebook and everything was working fine, I really liked it and couldn't understand how I survived without it.
    One day I accessed my website through my android browser and then I saw the problem..
    When displaying from android browser the Ultimate Facebook is messing up the page.
    It's also happens when using Safari browser but the weird part is that the pages are displaying fine when using Chrome or Firefox.
    since my site is in Hebrew you might be having trouble seeing it yourself so I added some photos. Here it how it supposed to look (a screenshot from Chrome mobile) :
    http://postimg.org/image/98ukkytfb/

    And Here it how it looked from Android browser:
    http://postimg.org/image/4ybbbmyyf/
    http://postimg.org/image/egb2bokmv/

    As you can see in the android browser the "like" and "Share" buttons are located way too much to the left and not lined up with the article, and so does the comments section.
    More then that, in the browsers that aren't displaying good (android browser, Safari) the page is not responding aka you can't click on anything not even links in fact you cant interact with the page at all other then scrolling up and down, so that's obviously bad.

    I really love this plugin and I would hate to delete it but in a world ruled by mobiles I can not keep it.

    btw you can check it out yourself, here is a like directly to a post with the plugin component:
    http://howtoeasy.info/all-guides/how-to-stop-programs-from-running-at-computer-start/

    Please help,
    thank you :slight_smile:

  • Michelle Shull

    Hey there, Maor

    Sorry for the delay, two staff members left the team and two others have had deaths in the family, we're all trying to do the best we can, but I've fallen a bit behind.

    Let's try some alternative CSS here, this will also go in your theme's custom CSS file, replacing the CSS I gave you earlier:

    #facebook {
    float: right !important;
    }

    This should push all the FB elements that need to be pushed to the right to the right.

    As for your additional issue, with links not being clickable on mobile, it's not an issue i'm seeing on the devices I have on hand to test with, so I'm having trouble reproducing it. Have you ruled out other plugins or your theme interfering with Facebook? When you de-activate Ultimate Facebook, does the issue go away completely? Does Ultimate Facebook work as expected with all other plugins de-activated and using a default theme? We've got a troubleshooting manual here that can walk you through these steps, as well: https://premium.wpmudev.org/manuals/using-wpmu-dev/getting-support/

    All the details you can help with here can help us help you track down the issue faster.

    Thanks!

  • Maor

    Hey,
    Thank you for your reply, I am very sorry to hear about your staff.

    Since I last posted here, I tried several more Facebook plugins, deactivating all my other plugins, use the default theme and implementing Facebook component manually (without any plugin).
    non of this staff fixed my issue. While that's put Ultimate Facebook off the hook it's still leave me with the problem.
    So in my experimenting I found that's it doesn't matter which Facebook component I use it will always shift way too much to the left, whether if it's just the like button or just the Facebook's comments or like box.
    It seem to me like the Facebook's code have some kind of issue with RTL or maybe just Hebrew because the only other guy with the same issue I have managed to find over google was also using Hebrew RTL site and he was describing the exact same issue. I found his thread at some forum but it was unresolved.

    I tried the CSS code you just gave me and unfortunately it also has no impact.
    I found some plugin that was able to display the like and share buttons pretty good using the iframe method but it was buggy and not supporting RTL so well so I dropped it.

    So it seem to me like the only way for me to use facebook in my site is by using the iframe method. any chance you could instruct me a bit about that? I can't seem to find good explanation.

    thank you!

  • Sajid

    Hi Maor,

    Hope you are doing great :slight_smile:

    In desktop safari I checked you have below code somewhere in your website that's causing the issue.

    If you remember where you added this code, then delete it (recommended).

    If you don't remember where is it, then add below code in style.css file of your child theme.

    .fb_iframe_widget iframe {
    position: relative !important;
    }

    Hope this will help :slight_smile:

    Cheers, Sajid

    • Maor

      Hey Sajid,
      Thank you so much, I was struggling with this issue for a long time and almost gave up.
      I put this code at the end of my child theme's style.css and it solved the problem.

      I did not understand what exactly do you think I have in my code that cause that, could you try to clarify that for me?

      One other thing, though it's less critical. While your code solve the displaying trouble both in mobile and desktop browsers, in the mobile browsers (safari mobile and android browser) I'm still getting some functional problem. The page is displaying well but if I try to press on something (and not necessarily Facebook's components) It will not press unless I press about 1 inch to the left.
      As I said it only happens in browsers where the displaying issue occur before.

      thank you!

  • Sajid

    Hi Maor,

    I am glad it helped and your issue is resolved :slight_smile:

    Sorry I forgot to post the culprit in above response. This is the code that was messing up the layout on mobile and desktop.

    .fb_iframe_widget iframe {
    position: absolute;
    }

    As long as this issue is resolved and we have lots of responses here. I suggest you to open a new thread for your other issue. You can link this thread in your new ticket to explain your issue. This will be extremely helpful for our staff and other members of forum.

    Have a nice day :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.