Docs

[ashleyswanson427]

Hello,

I have created a button and added the following CSS to make it stick to the bottom of the screen:

#bookbutton {
position: fixed;
bottom : 0;
right: 15px;;
width: 200px;
height: 50px;

z-index: 100;
position: -webkit-sticky; // required for Safari
position: sticky;
bottom: 0; // required as well.
}

It works well on desktop but not on mobile. Any ideas why this may be happening? You can view the page at: http://monumentalshift.com/andrew-davis-dev/

You can view the button on mobile but you have to scroll all the way down the page in order to see it (button: Orange button title, “HAVE A DATE IN MIND?”)

[Rahul]

Hi There,

Thanks for writing in! Can you please recheck the URL which you have provided so that we can have a closer look to the issue you are facing and we will be happy to provide you a tailored solution.

[ashleyswanson427]

It was initially set to private but that should be fixed now. Are you still having issues with it?

[Nico]

Hi There,

The link above does not show any button even in desktop. I also tried to check all your page and find the id: bookbutton to find the button however I could not be able to see it.

Would you mind sharing us the URL where you could find the button.

Thanks.

[ashleyswanson427]

So sorry. I think I’m losing my mind. It’s a Monday, right?? 🙂

Ok, NOW, I’m quite convinced you should be able to access the page and hopefully see what I’m talking about. Thanks so much for your patience.

[Jade]

Hi there,

Would you mind providing the admin access to your site so that we could check your current settings?

Thank you.

[ashleyswanson427]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for the URL. I was able to figure it out that you have make it hidden for all device by using all the hiding classes x-hide-xl x-hide-sm x-hide-lg x-hide-md – http://prntscr.com/dzk9nr

I am not sure why you did that but let’s remove them to get expected result.

Cheers!

[ashleyswanson427]

Well, I have it to hide for all devices except for mobile devices, which is why I had those classes there. I’ll do my best to explain what I’m trying to accomplish and hopefully it will make sense.

I’m using FormCraft plugin (contact forms) and it comes with a shortcode that you can add to the page and have a tab for the contact form stick/float to the bottom of the screen (you can view this here: http://monumentalshift.com/andrewdavis/ … bottom right hand side of screen) .

The problem is that this tab created some issues when on mobile devices (the screen doesn’t scroll well and the form doesn’t resize to the screen well). So, my hope was to create my own sticky button that would only be displayed on mobile devices that would link to a contact form page, rather than using the tab to trigger a popup.

My plan, then, was to have the FormCraft tab be present on all devices, except for mobile devices. And on mobile devices, I would add an X Button (only visible on mobile devices) that would link to a separate page.

Make any sense? Perhaps there are better ways to achieve this?

[Rupok]

Hi there,

Thanks for explaining. So you want to show that button on mobile device only? In that case you can add this under Custom > CSS in the Customizer.

#bookbutton {
  display: none;
}
@media only screen and (max-width: 480px) {
#bookbutton {
  display: block;
}
}

You can adjust the media query to control the device screen size you want to show it.

Cheers!

[ashleyswanson427]

Thanks so much for that. Unfortunately, I have to scroll to the bottom of the screen to see the button. Any ideas on how to make the button “sticky” on mobile screens? My hope is that it stays put on the bottom on the screen at all times (even once loaded).

[Rupok]

Hi there,

Thanks for writing back. You have added fixed position and it’s working fine. I am not sure why you need to scroll to see the button. It’s appearing on my end fine (check the attachment from my mobile device).

Still you can try adding this if there any z-index issue that might cause this on your end.

#bookbutton {
  z-index: 99999;
}

Cheers!

[ashleyswanson427]

I’m not seeing the button on Chrome, Firefox or Safari. So strange.

[Christopher]

Hi there,

Upon checking your site, the button was displaying fine on mobile, please see the attachment. Please clear cache and check again.

If you want to display button on all screen sizes, please remove following code :

#bookbutton {
    display: none;
}

Hope it helps.

[Author]

Posts