Mobile responsive design

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:

And like this on mobile:

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

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.

The root should be set to wrap (the root is the outermost flex container)

Ohey, thanks that works great!

And to get spacing between the different contents, I can use margins? Or is there smarter way? Thanks again.

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 :slight_smile:

1 Like

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.

This is what it looks like when narrowing the screen:

What am I doing wrong? :confused:

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

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

I think in the flex repeater it's the props.elementStyle you want to add the gap prop to. For example

props.elementStyle.gap = 5px

Thanks again! :slight_smile:

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 :slight_smile:

homeview.zip (69.1 KB)

homeview_nm.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
1 Like

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