Icons positioning on iPhone not nicely on the bottom

Hi @swissdrago,

Thank you for your message! Glad to hear that you’re enjoying the plugin ??

Our developers are checking the issue and we will provide you further feedback as soon as possible.

Hi Efe, thanks for your kind and quick reply.

Since we are using the free plugin but love it so much (and don’t want to switch to another plugin), we are happy to pay something for the fix.

Just in case my explanation is not clear, here’s a screenshot: https://lonesome-dragon.com/download/temp.jpg

Thanks a lot for checking – and if you need more information in the meantime, please just let me know.

Have a great day, thanks again!

Wolfgang

Hi @swissdrago,

Thank you for your patience in this matter!

Could you kindly add the following code to your functions.php file on your theme? It should fix the issue for Safari ??

add_action('wp_head', function () {
    ?>
    <script>
        jQuery(document).ready(function ($){
            $(window).off('scroll');
            var documentheight = $("#sfsi_plus_floater").attr("data-top");
            $('#sfsi_plus_floater').css({
                'position' : 'fixed',
                'top' : documentheight
            });
        });
    </script>
    <?php
});

Let me know how it goes!

Hi Efe, wow thank you so much! You guys are wizards!

Well, now the icons are not floating anymore but fixed, but if this is the only possibility, that’s much better than before anyways and I’m very happy with it. Or maybe we could restrict the coding only for mobile view (the issue was only with the iPhone)?

One remark (but no real issue): now with the new coding, on PC desktop browsers (at least using Firefox and Chrome), when loading a page the icons will first be placed and then shifted a little bit to the left. I guess it has to do with the sequence when our settings with the left alignment of -15px are considered during the positioning of the icons.

If the coding would be restricted to mobile views, also this “left shift” after loading on desktop browsers would be solved and we could keep the floating as it was before for desktop users.

What do you think?

Thanks again and have a great day!

• This reply was modified 9 months ago by swissdrago.

Hi @swissdrago,

Thank you for your feedback!

I’m seeing in both desktop and mobile versions of Safari & Chrome that the icons are pinned to bottom left of the site, I wasn’t able to replicate the alignment issue.

Would there be any possibility of a video capture that you could provide us maybe, for us to determine the issue better and provide a solution for it?

Thank you! ??

• This reply was modified 8 months, 3 weeks ago by Efe Dinler.

Hi Efe, thanks for your answer. I made a short video clip where I reloaded the page four times. You can see that after each load, the icons are shifting a little bit to the left to the final position.

Since this only happens on desktop browsers (e.g. Windows Firefox and Chrome), it might be the best solution to restrict the coding that you sent to be applied on mobile screen size only (CSS), what do you think? With this, we even could keep the floating effect on desktop computers (which is lost with the fixed position of the icons with the coding you sent).

Here comes the video clip: https://lonesome-dragon.com/download/social_media_icons.mp4

Thank you so much and have a great day

Hi @swissdrago,

Thank you for the feedback! Yes we have been able to replicate the issue. Could you maybe try the following code now instead?

add_action('wp_head', function () {
    if(wp_is_mobile()):
    ?>
    <script>
        jQuery(document).ready(function ($){
            $(window).off('scroll');
            var documentheight = $("#sfsi_plus_floater").attr("data-top");
            $('#sfsi_plus_floater').css({
                'position' : 'fixed',
                'top' : documentheight
            });
        });
    </script>
    <?php
    endif;
});

Hi Efe, thanks for the adjustment.

I was confused, because with this, sometimes it worked, sometimes not. On some pages it worked, on the others not.

Finally I found out, that wp_is_mobile does not work properly with page caching systems (which we do use).

Reason: the cache will contain mobile OR desktop version, depending on what device the first request was made from. All further requests will be served with this version, no matter what device type it is.

What about just restricting the code with the fixed icons positioning for mobile devices using CSS? Something like:

@media (max-width: 480px)

What do you think?

Sorry for keeping you so busy with this, thanks a lot!

Hi Efe, on our German site, I removed the coding and simply fixed the position of the icons with some CSS for mobile devices like this:

@media only screen and (max-width: 650px) and (min-width: 0px) {
#sfsi_plus_floater {
    position: fixed !important;
    top: unset !important;
  }
}

It’s available on https://www.liebesschaukel.ch if you want to check.

I think that will do the job, what is your opinion?
In case you also think that’s fine, I will do the same for the English site https://lonesome-dragon.com and we could close this ticket.

Many regards, thanks again

• This reply was modified 8 months, 3 weeks ago by swissdrago.
• This reply was modified 8 months, 3 weeks ago by swissdrago.

Hi @swissdrago,

Please accept my apologies for the late response, I haven’t received a notification for some reason ??

It looks great, and it seems to be working properly.

If you run into any issues or have any other questions, please feel free to open up a new thread in our forum. Thank you!