# Mobile Responsive form

**URL:** <https://forum.inductiveautomation.com/t/mobile-responsive-form/104072>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 24, 2025, 8:58am UTC](https://forum.inductiveautomation.com/t/mobile-responsive-form/104072 "2025-03-24T08:58:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 24, 2025, 8:58am UTC](https://forum.inductiveautomation.com/t/mobile-responsive-form/104072/1 "2025-03-24T08:58:00Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/optimized/3X/6/3/63d44a71fe74b71db308acf40a48ce7b0e637e98_2_690x27.png)

Mobile:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/97ea2c1dd0549670ceedcaa07111b0f469165372.png)

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 😕

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 24, 2025, 11:09am UTC](https://forum.inductiveautomation.com/t/mobile-responsive-form/104072/2 "2025-03-24T11:09:56Z")

</div>

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

> **[Realizing common layouts using grids - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids)**
>
> To round off this set of CSS grid layout guides, we're going to walk through a few different layouts, which demonstrate some of the techniques you can use when designing with grid layout. We will look at an example using grid-template-areas, a...

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