Rectangles and text boxes are not resizing uniformly

hi all. i’m very new to Spark AR and was tasked to create a filter for a client. It seems very easy, but i am having some problems getting it to work.

it is basically a color filter with some text box overlays. i got it to look ok on my own device on IG (iphone 11). but the sizing is not consistent and doesn’t match the Spark environment.

and then when i switched the view to ipad, it completely destroys any alignment and sizing, in a way that makes no sense to me. also, i have both text boxes sized to 28pts, but the bottom one is bigger. why is that? i have pinning on, but it is acting completely erratic.

i’m hoping to basically link the text to the black boxes and have them scale proportionally depending on the device. this seem super basic, but i can’t find a solution. please help! thank you!

it’s only letting me upload one photo to illustrate this.

Responsive layouts are really hard to do in Spark. I haven’t found a really smooth way to do it, but it can be done with some math. Using fixed values won’t work.

First, note that by using “scale to fit,” you are telling spark to override your font size, but it’s useful for creating responsive layouts.

For responsive containers, you should set the width and height as well as position, based on screen size. For example, if you want the text box to stretch to 90% of the screen width, then you’d multiply screen size x by .9.

If you want to maintain an aspect ratio for this container, you would take that width value and multiply it by another number, e.g. height = containerWidth * 1/8

You will follow a similar process for determining positions. It’s all about creating relationships between elements, as opposed to defining a specific pixel value.

thanks! so i would need to do a separate set of values for different devices?

That’s the whole idea behind responsive design - it will flex to any screen size!

If you need more control, you could add clamp operations to limit the maximum size of the panels. I’ve never found the need for this, though.