Best way to remove fill browser resolution?

Hello all, I'm fairly new to Ignition and am creating an application to be used on both a desktop monitor and a mobile phone. I've recently run into a couple of issues with screen scaling, even when just using he desktop resolution. I was just curious if there was a method that works best for adapting to a computer's desktop resolution.

Basically I have created a 800px x 800px view. I created a flew container to hopefully adapt to the size of the screen, but even when I put components at the edge of the container, the project in the browser still has a ton of dead space.

As far as the mobile application goes, I was planning on creating breakpoint containers to change based on the px size of the screen. Is this the right approach or is there a better way to do this?

Again, fairly new the webpage/Ignition design here and just looking for some best practices. Thanks!

1 Like

created a flex container to hopefully adapt to the size of the screen, but even when I put components at the edge of the container, the project in the browser still has a ton of dead space.

You likely need to enable "Grow" on one of the components in the flex.

Check out this User Manual Page: Perspective - Flex Container | Ignition User Manual

Each component has a few flex-related position properties (grow, shrink, basis), and then the whole container has a few settings like direction and justify.

Using flex containers + breakpoints is a good approach.