Hello,
I currently have a reactive application and everything looks good in Desktop View but when I try to view it in mobile the Floating container gets ugly
Is there a way to identify the screen size and adjust the container? we're thinking to make it look like this:Thank you!
Hi Nikkoli,
You can inspect your application in the browser by clicking on F12, and at the top you will find mobile icon, where you will get the resolution of your screen.
Then you need to apply media query specific to that resolution as Below:
@media (max-width: 640px)
{
//place your css inside this
}
The above media query will be applicable to the device size of max width 640px and below than that. You need to apply media query based on your screen size .
I believe the Popup widget will do that
You can detect whether you are in a Phone, Tablet or Desktop with OutSystemsUI functions like IsPhone(), IsTablet() and IsDesktop(). That way you could decide to add a Floating Container or just a Container under the map, for instance.
You may also want to check the Display on Device OutSystems UI pattern...
Hope this helps!