So in perspective most of my layouts utilize the column container with a few coordinate containers.
The column container has breakpoints to represent phones, tablets and monitors. So for example the large break point is set as 1250 to distinguish tablet (Landscape) over monitor.
How important is view width and size and how is it related to the breakpoints etc? Does the width need to be over 1250 as the largest breakpoint is 1250 ?
Everything seems to scale well in the column container but the coordinate container it doesnt as there is no anchor properties like we had in vision to keep items left and right etc. So if say I set the page width to be 1000 and use a monitor thats 1920, what every I had to the far right in the designer isnt to the far right in the project view, unless Im missing something?
For the column container specifically (other containers are completely different):
There are two “pixel” dimensions that actually matter.
The first are the
gutter properties - no matter the dimensions of your column layout, the ‘gutters’ will always be respected on the outsides of the actual layout area.
The second is the breakpoint configs themselves. Any screen that reports itself as above the breakpoint will use the relevant component layout - but with each column stretched to
(<viewport width> - (2 * <horizontal gutter>)) / <number of columns, which is fixed at 12>).
So paying attention to specific pixel dimensions when actually designing within the column container isn’t necessary.
And for the Coordinate Container, it’s working exactly as intended, assuming you’re using “fixed” mode (
root.props.mode = “fixed”).
If you want your Coordinate Views to maintain position and size across different aspect ratios, set
root.props.mode to “percent”. This setting should allow you to position something all o the way to the right of your View, and then at runtime you’ll see that it always stays to the right - regardless of window dimensions.