Button Group - mobile optimization

Hi all,

I have a button group that contains 2 buttons side by side with a small gap. Within webflow, when I check the mobile view it drops one button under the other - which works great. However, when I published it, on mobile the buttons do not have a gap (see image below).

Any suggestions? Thanks in advance.

Here is my site Read-Only: Webflow - 46vc

The reason they are connected like that is because of the wrap in the flex. Wrap is a good thing but you need to account for bigger phones which might have wider screens and then there will be enough space for both buttons. You can control it in this situation via gap or you can disable wrap and then they will always be one below another on mobile.

Let me know if this helped, cheers!

Hm when I disable wrap I’m still having the issue.

Is there another section that you are referring to?

Thanks in advance!

You need to set flex appropriately to how you want them to sit inside, in this case above the gap click on vertical and Align and Justify as needed

It sounds like you may need to add a margin or padding to the button group, or to the individual buttons, to create a gap between them. You can do this in the Styles panel for the button group or buttons. you can also check Pinterest Video Downloader