Mobile Responsive form

Ignition
1

I haven't done much at all for mobile responsivity yet, and I'm trying to work out the best way to change from these two "form" views for PC and Mobile:

PC:
image

Mobile:

image
image379×231 8.31 KB

I don't think I can use a column container, as I basically want the buttons to be a fixed size for PC and auto-sized for mobile, and the col container will grow them in PC, as well as not being able to add the auto gap between the save and reload button.

I might be able to get it working with a flex container and wrapping, but it will be a struggle, and involve binding to the viewport width to swap component position settings which seems overly complex and prone to breaking...

The only way I can see to do it and have complete control is by using a breakpoint and having 2x set of all the components, which isn't very maintenance-friendly :confused:

Wondering if there is a way I haven't thought of?

2

This level of flexabilty can be achieved with css (grid-template) and media queries.
Its probably a bit more initial work to do than a container view. (if not fluent in css)
But it should be quite scaleable onces you have your classes and styles setup.

This should be a good starting point i think

Adding some override classes to the buttons for column container with media queries, could also just be enough though.