Adjust size on mobile devices.

inam

I would like to modify the button to be full-length on mobile devices. Currently, the buttons are positioned at the corners of the screen, but I want them to extend across the full width, similar to the attached photo.

Could you please guide me on how to achieve this?

Thanks in advance for your help!

AaronR

Hello,

Thanks for reaching out! There isn't a way to stretch a Buttonizer button out quite that far (bottom bar/most of the screen). Are you trying to create a subscription pop-up like the screenshot you sent, or was that purely an example you sent for the relative button size?

If you are creating something that functions like the entire popup in your screenshot, seems like you would want to be creating the button in the popup itself. You can use a Buttonizer button to make the pop-up appear on a click. For example, you can create a Brochure button that when tapped will open the larger popup using one of these options here:

The actual Buttonizer buttons will not get quite that large though, if you are just using the screenshot for a size comparison.

Hope that helps!

inam

Hi Aaron,

Thank you for the reply i just want to increase the button size and bring them closer right now they are far off from each other i want them to come together like the refrence with red line. That's all i want to do.

AaronR

Hello,

I see, thanks for the clarification! There isn't a way to use the Buttonizer positioning parameters to do that. You can try accomplishing the same thing by adding a custom class to each button group, then add some CSS to customize the appearance though.

If you look on the right rail for each button group and scroll down, there is a tab to add a custom ID/Class:

If you click into that tab, you can add a custom class. For example, you can add whatsapp-group and callus-group for the respective button groups:

Once you have given each button group a custom class, you can add some CSS to your site to adjust the appearance. You can start with something like this for example, and adjust from there:
.whatsapp-group, .callus-group { width: 50%; }

Hope that helps!