Help with responsive form layout (what is best practice?)

I have a form I want to make… On desktop it’s two columns, on mobile its one column:



To build this I’ve started with a single row group, with text inputs inside. My group has 24px, 24px, 24px ,24px padding, 16px column gap and 24px row gap. The group has a min height of 442px.

I tried to make my text inputs 50% width, and with a conditional that changes them to 100% width when screen size <= 640px. I have the following issues:

  1. Because of the padding, 50% width causes the items to warap to the next line:

  2. When the items wrap, there is a huge amount of spacing between each input.

Any help on how to do this the best way would be greatly appreciated!

Thanks :slight_smile:

1 Like

I hope that can give you an idea of ​​how to proceed.

Editor:

Preview:

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.