# Mobile responsive design **URL:** \ **Category:** Maker\ **Created:** [October 28, 2022, 7:23am UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801 "2022-10-28T07:23:36Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Vidar\_Hetlelid1](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vidar\_Hetlelid1](https://forum.inductiveautomation.com/u/Vidar_Hetlelid1)\ **Post date:** [October 28, 2022, 7:23am UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/1 "2022-10-28T07:23:36Z")
Hi, I am testing out maker edition for my home automation projects. My design works great on desktop, not so great at mobile. I am using flex containers within flex containers to get the layout the way I want it. I get that flex isnt the right container, but I dont get which I should use to make the left menu dissapear on small screens and content to appear under other content on smaller screens, and side by side on bigger screens. Can anyone please help me in the right direction in order to choose container, and how to put this together? Would be very appreciated. Thanks. I want the design to be like this on desktop: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/0389dcda518b1c9ce6f131477041837271bfe6f5.png) And like this on mobile: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/0/804c2f9eff694fc1e45e2e4d791345fc38051bf3.png) ---
**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:** [October 28, 2022, 12:15pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/2 "2022-10-28T12:15:14Z")
Flex's are good for your contents if you set the outermost flex to wrap. You need to use docked Views for the north and east menus. I suggest you have a look at the sample project you can install when you first install ignition ---
**Author:** ![Vidar\_Hetlelid1](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vidar\_Hetlelid1](https://forum.inductiveautomation.com/u/Vidar_Hetlelid1)\ **Post date:** [October 28, 2022, 12:50pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/3 "2022-10-28T12:50:33Z")
> [@nminchin](#): > > most flex to wrap. Thanks! I get the menu to work, but not sure about the contents. In the view Test i have 3 flex containers in different colors to test, the blue one is set to wrap. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2e257ebe30df9e93a74ad3cd5fb2de17d995e008.png) ---
**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:** [October 28, 2022, 12:51pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/4 "2022-10-28T12:51:20Z")
The root should be set to wrap (the root is the outermost flex container) ---
**Author:** ![Vidar\_Hetlelid1](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vidar\_Hetlelid1](https://forum.inductiveautomation.com/u/Vidar_Hetlelid1)\ **Post date:** [October 28, 2022, 1:05pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/5 "2022-10-28T13:05:40Z")
Ohey, thanks that works great! And to get spacing between the different contents, I can use margins? Or is there smarter way? Thanks again. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/7122c424792e20fb1d1aaa4c59f5ab57c23785d5.png) ---
**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:** [October 28, 2022, 1:06pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/6 "2022-10-28T13:06:11Z")
Use `style.gap`. I forget how it works with wrap though...you might need to use margins. (Definitely use gap when it's not wrapped though) Edit: It seems like gap will work 🙂 ![Screenshot_20221028_233936](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/8/68b8e1e361f61541d207e5426a6918a27f34c6e8.jpeg) ---
**Author:** ![Vidar\_Hetlelid1](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vidar\_Hetlelid1](https://forum.inductiveautomation.com/u/Vidar_Hetlelid1)\ **Post date:** [October 29, 2022, 7:26pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/7 "2022-10-29T19:26:41Z")
Thanks, not sure how to use style.gap, or any CSS for that matter in ignition... Anyways, this is my current design with margins, which is made up of flex container, inside flex container, inside flex container etc.. Tried to set the outer flex to wrap, but on smaller screens it crashes and look terrible. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/9/a9b1e7d84f20faf474d1b669a345db063b9b4d95.png) This is what it looks like when narrowing the screen: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/d/8d440bf9dbd61b7b7850e8ef04f0303a9907b53c.png) What am I doing wrong? 😕 ---
**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:** [October 29, 2022, 9:10pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/8 "2022-10-29T21:10:25Z")
What are your position prop values on the flex container that your content containers are in? It looks like grow and shrink might be set to 0 with a fixed basis Can you post the json of your view? Shift right click on the view and down the bottom, copy json. Make sure to paste in here using the preformatted text \ button. You may want to use calculated font sizes for your text as well Have a play with changing the 0.8 in here and setting this to the text font size ```auto calc(0.8* (1.0*vmin + 1.0*vmax)) ``` This will size the font based on the width/height of the client viewport. You can also use `clamp(8pt, calc(...), 16pt)` to clamp the min and max sizes I would recommend creating perspective styles to create standards for your font sizes. P styles are applied in styles.classes props > [@Vidar\_Hetlelid1](#): > > not sure how to use style.gap, or any CSS for that matter in ignition... I think in the flex repeater it's the `props.elementStyle` you want to add the `gap` prop to. For example ```auto props.elementStyle.gap = 5px ``` ---
**Author:** ![Vidar\_Hetlelid1](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vidar\_Hetlelid1](https://forum.inductiveautomation.com/u/Vidar_Hetlelid1)\ **Post date:** [October 30, 2022, 12:34pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/9 "2022-10-30T12:34:30Z")
> [@nminchin](#): > > post the json of your view? Shift right click on Thanks again! 🙂 The JSON was too large to upload. I have attached the exported view instead. I didnt know about the calculated font side, I will try it out 🙂 [homeview.zip](https://forum.inductiveautomation.com/uploads/short-url/1V8JdDXddjFiREtJVktCLRfiRL1.zip) (69.1 KB) ---
**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:** [October 31, 2022, 3:06am UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/10 "2022-10-31T03:06:34Z")
[homeview\_nm.zip](https://forum.inductiveautomation.com/uploads/short-url/oLFS1c5kXr9vjkl69nwy86QWVDc.zip) (35.3 KB) It's not perfect, but see if this is more like what you're after. A couple general comments: - you should use Perspective styles for all of your common style configurations across components, like the "tilsett" containers. Either that, or use a template View for this component. - I've converted most of your margins and paddings to use `gap` instead. Some margins/paddings were still needed though - The 3 contents in the top row are good candidates for a single template View ---
**Author:** ![Vidar\_Hetlelid1](https://avatars.discourse-cdn.com/v4/letter/v/53a042/32.png) [@Vidar\_Hetlelid1](https://forum.inductiveautomation.com/u/Vidar_Hetlelid1)\ **Post date:** [December 4, 2022, 6:05pm UTC](https://forum.inductiveautomation.com/t/mobile-responsive-design/65801/11 "2022-12-04T18:05:41Z")
Hello, and sorry for my late reply. Your solution worked out great, thank you so much. There is one thing i would like to change if possible, and that is the scoll bar. Is it possible to remove scrollbar and adjust the height of the components to the screen height when using a desktop? And when using mobile phone or any other smaller screen, the scollbar can be used. Thanks again