Hi,
Trying to build a Reactive Web app, used Responsive Column Layouts. Need some screens to have reactive layout of mobile orientations (Portrait and landscape) .
For TabletBehaviorLandscape and PhoneBehaviorLandscape, I want to provide different css Reactive in terms of orientation. Tried below media query, in css of the page, does not seems to work
@media screen and (orientation: landscape) {
.tablet .form-wrapper {
padding: 40% 10% 5% 10% ;
}
.phone .form-wrapper {
padding: 15% 5% 5% 5% ;
Is there any way provided by outsystems to differentiate between portrait an landscape mode when device is phone? or do I need to work on media queries?
Also where is the correct place to write a media query to affect an explicit screen?
the OutSystemsUI module has a client action function GetDeviceOrientation that returns either landscape or portrait as a result. To get the device type you can use the GetDeviceType client action function (tablet or phone as result). Both are functions so you can use also in expressions directly.
If your css targets a specific screen only then you would place on screen level :-)
Stefan