Sticky social icons at the bottom of page on mobile

Hi Tan,

You'll need to change the CSS a bit.

Can you link me to your site where I can see the social icons?

Ok. You can see it here.

Do you want the icons horizontally aligned at the bottom of the mobile screen?
https://www.screencast.com/t/31M7NmxYrW

If so, try the following the steps:

1. Set both the outer container and inner container to full width instead of contained 50px width.

2. select the buttonsblock, and uncheck the stack vertically option.

3. Change the CSS to:

.sticky-social-icons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

4. Remove the hide-on-mobile class from the container, and add hide-on-desktop class to the container.

I noticed that you are using different icon sizes and spacing, make sure you adjust them after the 4 steps are done.

Thank you Ying.

I want 2 versions, one for mobile (2 icons on bottom), one for desktop and tablet (4 icons on bottom right corner)

After following your instructions, I made another version for mobile. But it doesn't like your screenshot :(

Could you check it again?

Hi Tan,

To clarify, did you uncheck the stack vertically option of the Buttons Block for mobile view? Example: https://share.getcloudapp.com/GGuK2oAX

Kindly let us know.

Yes. I did. And I checked the Fill Horizontal Space on mobile

I see. Thank you for confirming.

Can you check if you’ve set the Container Block’s Container Width to full? Example: https://share.getcloudapp.com/7Ku6bmlr

Right now, upon checking, I believe it’s set to just 50px. Kindly try setting both Container and Inner Container widths to full.

Kindly let us know how it goes.

I think I know where the problem is. Because I copy the code of Leo and use it for 2 versions so when I customize, it is still the same on the frontend.

I rebuilt the mobile version from scratch, and it worked after following Ying's guide.

Thank you so much for your help! :)

I see. Glad you were able to make it work! You’re welcome!