[Resolved] 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?

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.

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.

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 see. Glad you were able to make it work! You’re welcome!