16
Views
3
Comments
Solved
Responsive Screen CSS
Question

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!

Rank: #499
Solution

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 . 

Rank: #13226

I believe the Popup widget will do that

Rank: #499
Solution

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 . 

mvp_badge
MVP
Rank: #19

Hi Nikkoli,

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!