Responsive design page containers

So I apologize in advance because I am a complete NOOB not only to Appgyver but UI design in general.

I am trying to design pages to be responsive to different device sizes, and so I’ve created page containers for these different sizes. (I think this is right.) Next step is to bind these to some System variable formulas to show what page sizes to look for. Can anyone show me some good examples of how I would structure the formulas for these?

You could use systemVars.dimeonsions.screen.width to get the devices screen width (same with height with .height instead of .width).
You also could get the window width (better for desktop websites than screen width) with sytemVars.dimeonsions.window.height.

I also used systemVars.formFactor to get the information if it is a phone or tablet or desktop or big screen or unknown.

Maybe this will help you.

Thanks so much for your help. How would you put that into a formula? For example, if you want the page to show for a screen width between 360 px and 412 px. I’m struggling a bit with the syntax so I’m thinking if I can see a good real life, well written example or two I can get it in my head finally.

Maybe this could work. I didn’t tried by myself in preview, but i got no error message.
systemVars.dimensions.screen.width >= 360 && systemVars.dimensions.screen.width <= 412
Same with other values.
You can use this e.g. with true/false at visibility part. As i understand right you only want to show a container if it is between this values.

1 Like

Yes, that is exactly what I was looking for. Thank you so much for helping.

1 Like