How do the Screen sizes offered in the Form Model Preview (and Document Model Ad hoc test) map to the breaking points set in the applicationSytle of a Theme?
- mobileMaxWidth: 767 px
- tabletMinWidth: 768 px
- desktopMinWidth: 992 px
When I toggle the width in the Form Model Preview it shows the Form with the following widths:
- Large → full screen, for me 1740 px + 40 px padding on both sides (1820 px)
- Medium → 820 px + 40 px padding on both sides (900 px)
- Small → 620 px + 40 px padding on both sides (700 px)
- Extra Small → 420 px + 40 px padding on both sides (500 px)
I believe the number in the FM Preview is set in a way so they are in between the breakpoints.
Thanks @binh-deep-cache, that helped.
So does that mean that the following is true:
- Large represents screens >= 992 px wide
- Medium represents screens >= 768 px but < 992 px wide
- Small represents screens < 767 px wide
Also, what controls the break point for extra small? This seems to happen at around 575 px but I can’t find the setting for this.
Hi @malcolm-silver-ice , the extra small doesn’t have theming configuration. It’s an “extra” layout that target really small devices (like iphone 5?) and implicitly apply some styles to our layout grid (in FE term: control grid). This style basically layout everything top to bottom, 1 column.
This can be configured by the breakpoints property of the layout grid.
See Layout Grid in the Widgets showcase
