Phone input formatted as US Phone not working on mobile browser

I created an input for phone number which is formatted as US phone. This limits the input to 10 characters and also adds visual formatting to (—) — ----

This works well on a computer but when viewing this input from a mobile device I am not limited to 10 characters and the formatting is gone.

Is this a bug or does this UP phone formatting not work for mobile browsers? How can I get this to work on mobile?

US phone formatting on desktop:
Screen Shot 2020-07-03 at 7.50.51 AM

And on mobile browser:

1 Like

Hello all, just wanted to bump this thread in case anybody had general tips for layout in general on mobile browser vs desktop as I’m having similar layout challenges where elements look good on desktop but on mobile look messy and weird. Thanks in advance

At first it may be very confusing but you need to learn about how Bubble handles responsiveness. Start here:
https://manual.bubble.io/building-a-user-interface/building-responsive-pages

It’s working now. Not sure why it wasn’t working originally.

Thanks @ralphlasry! Much appreciated! By any chance would you also have any links/tips on repeating groups in mobile? Based on research I’ve been doing on the forum, it doesn’t look too good. On my desktop, I’ve got 4 columns but on responsive mobile, it’s only 1 column no matter what I do. I’ve tried playing with the max width on Main repeating group, unchecking the repeating group has a fixed width, and nada.

Thanks in advance and I’ll ck out the manual link you sent!

I’ve created beautiful repeating groups on mobile and desktop. Once you understand how Bubble handles responsiveness it becomes a lot easier to figure out how to make your design work well.

If you share what your repeating group looks like I may be able to give some pointers on how to get it to display better.

Thanks for your offer of help @ralphlasry,

I’m actually using Zeroqode’s excellent Nomadly template: https://zeroqode.com/template/nomadly---nomads-like-nomad-list-template-1534851604197x504312624998514700

If you look at the mobile version, you’ll see you’re limited to only one country at a time and wanted to see what it would look like with 2?

On related note, I posted this in a new thread but would you happen to know if you can also list html embed codes (ex. Youtube although I know that there’s already a section for that but any other company’s embed code) in the database so that every element could have it’s own unique embed code?

Thanks in advance!