Sticky buttons at bottom of mobile page

sorry, forgot url

Hi Jorge,

You can create a block element, add the 2 buttons into it.

Set the block element type to hook, use after_footer as the hook name, choose location according to your needs.

To hide the buttons on desktop, you can add hide-on-desktop class to the buttons:
https://wordpress.com/support/adding-additional-css-classes-to-blocks/

Got it to work but buttons are one on top of the other rather than side by side

Try add this CSS:

.site-footer + .wp-block-buttons {
    display: flex;
}
.site-footer + .wp-block-buttons > * {
    flex: 1;
}

That worked great, thank you. One last thing the buttons aren't sticky as always being on the bottom of the mobile window. Also how do i hide the footer on mobile?

I figured out hiding the footer/copywright bar on mobile, just need help with the floating buttons on scroll, meaning i would like those two buttons to be always visible at the bottom. Thanks again!

Hi Jorge,

You can modify Ying’s code to something like this to make the buttons fixed at the bottom.

.site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
}
.site-footer + .wp-block-buttons > * {
    flex: 1;
}

If you wish to have it sticky on mobile only, you may use this instead:

@media (max-width: 768px) {
    .site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    }
    .site-footer + .wp-block-buttons > * {
        flex: 1;
    }
}

Kindly let us know how it goes! :)

I actually would like buttons hidden on desktop , Tried the sticky on mobile code but the buttons are not centered, and the request quote lettering is stacked.

I actually would like buttons hidden on desktop

I can see that you’ve currently set it not to display on both desktop and tablet. Alternatively, here is a code for that as well:

@media (min-width: 769px) {
	.site-footer + .wp-block-buttons {
		display: none;
	}
}

Tried the sticky on mobile code but the buttons are not centered, and the request quote lettering is stacked.

Can you try this code instead?

@media (max-width: 768px) {
    .site-footer + .wp-block-buttons {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 9999;
    }
    .site-footer + .wp-block-buttons > * {
        flex: 1;
    }
}

Hope this helps! Kindly let us know how it goes. :)

did not work, visit my site so you see what i mean.

Sorry about that. I mistakenly copied the previous code instead of the new code I tested.

Here it is:

@media (max-width: 768px) {
        .site-footer + .wp-block-buttons {
        display: flex;
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 9999;
        width: 90%;
        }
    }

This is what it looks like from my end: https://share.getcloudapp.com/L1uW08qL

Kindly let me know how it goes. :)

Looks like that worked, thank you!.

I will close this topic, thanks again!

You’re welcome Jorge! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)