Sticky action buttons (2-3 buttons) only showing on mobile bottom

Ask the Community General Questions
1

On mobile there is a nice feature to have two or three action buttons always showing at the bottom of the viewport (screen).
See picture as example

IMG_1632
IMG_16321318×1071 139 KB

2 Likes
2

Hi there, @Axel_Hilland :wave:

Could you please describe what specific buttons are needed for your case (call, chat, etc)?

1 Like
3

I wanted something like that myself and started customizing a widget for it. But it’s only visible in the mobile view.
https://eb1030d8aeea4cf691bbf2a5a47d949a.elf.site/

2 Likes
4

@Max Yes, buttons like: Call, Book, Map

1 Like
5

Yes, and if you can edit the text on the buttons and links that would be great!!

2 Likes
6

Got it, thanks!

If you’d like to redirect users to some pages, when clicking on these buttons, you can use our Number Counter, as Sina suggested, and add the needed links there:

image
image328×760 15.2 KB

Feel free to check it out and let me know if this covers your idea :slightly_smiling_face:

8

Hi @Max, have you adjusted it or does the custom CSS code still need to be posted here.

9

What CSS code do you mean?

10

@Max The buttons Axel_Hilland wants only work with this CSS code. Please take a look at my code.
After all, it’s the Number Counter that has been repurposed for buttons, so to speak. :slightly_smiling_face:

1 Like
11

Got you, thank you so much for your note, @Sina!

@Axel_Hilland, To display the buttons at the bottom and only on mobile devices, please use this code, as Sina did, in the Custom CSS field on the Style tab of your Number Counter widget’s settings:

@media(max-width: 500px) {
[class*='Main__Component-sc'] {
bottom: 0px !important;
padding-right: 10px !important;
padding-left: 10px !important;
padding-bottom: 0px !important;
top: auto;
left: 0%;
right: 0%;
position:fixed;
margin: 0px;
}
[class^='Card__Component'] {
height: 60px;
border-radius: 0px;
}
[class*="Counter__CounterComponent-sc"]{
  display:none !important;
}
}
@media(min-width: 500px) {
[class*="Main__Component-sc"]{
  display:none;
}
[class*="Counter__CounterComponent-sc"]{
  display:none;
}
}
1 Like